Flex item when wrap, change margins and paddings - html

Question

is there a way to change margin or padding when a flex item is wrapped?
This is my problem:
I have a div 'buy' with margin: 0 auto, because i want it to be always at the right, but when this div is wrapped, i want to change that margin.
Before wrap:
After wrap:
This is my code:
HTML:
.container {
cursor: grab;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
width: 70%;
background: #24252A;
margin: 20px auto;
height: auto;
border-radius: 5px;
box-shadow: 3px 3px 3px 3px #0d0d0d;
display: flex;
flex-wrap: wrap;
}
.container > div {
margin-right: 10px;
}
#imgBox {
width: 200px;
height: 200px;
object-fit: contain;
align-self: flex-start;
margin-top: 10px;
}
#content {
max-width: 50%;
min-width: 200px;
margin-top: 10px;
}
#buy {
margin-left: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.buy-specs {
display: flex;
flex-direction: column;
align-items: center;
}
#buy > * {
margin-left: auto;
}
<div id="container0" class="container" draggable="true" ondragstart="drag(event)">
<div id="imgBox">
<img src="../img/pinguini.jpg" alt="" draggable="false">
</div>
<div id="content">
<h2>Pinguini Tattici Nucleari</h2>
<p id="luogo">Torino - Pala Alpitour</p><p>04/10/2021 | 21:00</p>
</div>
<div id="buy">
<div class="buy-specs">
<p>Prezzo: 39,10 €</p>
<div id="quantityDiv"><p>Quantità: </p>
</div>
<button id="button0">Aggiungi al carrello</button>
</div>
</div>
Thank you!

Answer 1

Another approach could be to let the middle one to grow and push the last one.
last one can receive : margin:auto to be centered if alone on its row:
possible example:
.container {
cursor: grab;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
width: 70%;
background: #24252A;
margin: 20px auto;
height: auto;
border-radius: 5px;
box-shadow: 3px 3px 3px 3px #0d0d0d;
display: flex;
flex-wrap: wrap;
}
.container>div {
margin-right: 10px;
}
#imgBox {
width: 200px;
height: 200px;
margin:auto;
margin-top: 10px;
}
#content {
flex-grow: 1;
min-width: 200px;
margin-top: 10px;
}
#buy {
display: flex;
flex-direction: column;
justify-content: center;
margin:auto;/* optionnal to center if alone*/
}
.buy-specs {
display: flex;
flex-direction: column;
align-items: center;
}
#buy>* {
margin-left: auto;
}
<div id="container0" class="container" draggable="true" ondragstart="drag(event)">
<div id="imgBox">
<img src="https://dummyimage.com/200/349&text=pinguini" alt="" draggable="false">
</div>
<div id="content">
<h2>Pinguini Tattici Nucleari</h2>
<p id="luogo">Torino - Pala Alpitour</p>
<p>04/10/2021 | 21:00</p>
</div>
<div id="buy">
<div class="buy-specs">
<p>Prezzo: 39,10 €</p>
<div id="quantityDiv">
<p>Quantità: </p>
</div>
<button id="button0">Aggiungi al carrello</button>
</div>
</div>
Note that first an last one can be centered if standing alone on a row: