HTML template with flexbox - html

Question

I would like to succeed in doing this using flexbox, I have already tried something but without success.
You have to put the title, the price and the input in flex-direction column, right?
Css
.container {
display: flex;
flex-direction: column;
width: 80%;
margin: auto;
}
.details {
flex-grow: 2;
}
.center {
text-align: center;
}
.quantity {
display: flex;
justify-content: center;
}
.quantity button {
width: 20px;
height: 20px;
border: none;
border-radius: 0;
}
.quantity input {
width: 20px;
text-align: center;
border: none;
}
<div class="container">
<h2>Mon Panier</h2>
<div>
<div class="details">
<img src="https://aaaestrie.ca/wp-content/uploads/2017/10/livres.jpg" width="150">
<span>title</span>
<span>39 €</span>
<div class="quantity">
<button class="btn-minus">-</button>
<input type="text" id="quantity" value="1">
<button class="btn-plus">+</button>
</div>
</div>
</div>
</div>
expected template

Answer 1

Is this you are trying to get? It's not quite you showed in the image but it's near.
Let me know if it doesn't work for you.
.container {
display: flex;
flex-direction: column;
width: 80%;
margin: auto;
}
.details {
flex-grow: 2;
}
.center {
text-align: center;
}
.quantity {
display: flex;
justify-content: center;
}
.quantity button {
width: 20px;
height: 20px;
border: none;
border-radius: 0;
}
.quantity input {
width: 20px;
text-align: center;
border: none;
}
.details span:nth-child(2) {
position: absolute;
margin-left: 10px;
font-size: 1.3rem;
}
.details span:nth-child(3) {
display: inline;
float: right;
}
.container {
background-color: lightcoral;
}
.details img {
border: 2px solid gray;
padding: 20px;
}
.inc-dec {
border: 1px solid black;
display: flex;
/* transform: translate(-100%,-100%); */
}
<div class="container">
<h2>Mon Panier</h2>
<div>
<hr>
<div class="details">
<img src="https://aaaestrie.ca/wp-content/uploads/2017/10/livres.jpg" width="150">
<span>title</span>
<span>39 €</span>
<div class="quantity">
<div class="inc-dec">
<button class="btn-minus">-</button>
<input type="text" id="quantity" value="1">
<button class="btn-plus">+</button>
</div>
</div>
</div>
</div>
</div>

Answer 2

you added "Angular" tag to your question so I assume you are using Angular.
if that's the case I highly recommend to use the npm package angular-flex-layout so you don't need to write so much CSS.
import the angular-flex-layout module in your app and watch the magic :)
<div>
<h2>Mon Panier</h2>
<div>
<hr>
<div>
<img src="https://aaaestrie.ca/wp-content/uploads/2017/10/livres.jpg" width="150">
// magic starts here
<div
fxLayout="column"
fxLayoutAlign="center center"
fxLayoutGap=".5rem"
>
<span>title</span>
<span>39 €</span>
<div class="inc-dec">
<button class="btn-minus">-</button>
<input type="text" id="quantity" value="1">
<button class="btn-plus">+</button>
</div>
</div> // magic ends here
</div>
</div>
</div>