Według Mnie na przykładzie podanym przez Ciebie widać 3 wiersze i od tego bym zaczął, np.
[ on-line ]
<article class="product">
<!-- ----------------- row 1 ----------------- -->
<div class="product-title">
<h2>Converse Chuck Taylor All Star Low Top</h2>
</div>
<!-- ----------------- row 2 ----------------- -->
<div class="product-info">
<!--
Tu mamy podział na 3 kolumny
obrazek | product-description | product-details
-->
</div>
<!-- ----------------- row 3 ----------------- -->
<div>
<button class="add-cart">Add to cart</button>
</div>
</article>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
line-height: 1.4;
}
.product {
display: flex;
flex-direction: column;
border: 4px solid black;
width: 825px;
margin: 50px auto;
position: relative;
}
/* ----------------- row 1 ----------------- */
.product-title {
text-align: center;
}
.product-title h2 {
font-size: 22px;
text-transform: uppercase;
background-color: #f7f7f7;
padding: 15px;
}
/* ----------------- row 2 ----------------- */
.product-info {
display: flex;
height: 250px; /* korzystamy z faktu, że img ma height 250 */
}
/* ----------------- row 3 ----------------- */
/* BUTTON */
.add-cart {
background-color: #000;
border: none;
color: #fff;
font-size: 20px;
text-transform: uppercase;
cursor: pointer;
padding: 15px;
width: 100%;
border-top: 4px solid black;
transition: all 350ms;
}
.add-cart:hover {
color: #000;
background-color: #fff;
}
[ A Complete Guide to Flexbox ]