这是基本的CSS，但是我做对了。
我正在建立一个电子商务网站，所以我需要许多Flexbox来展示产品。我还在项目中使用引导程序。
这是我的代码：
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="display: flex; flex-wrap: wrap;">
<div class="col-sm-6 col-md-3" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
<img style="vertical-align: middle;" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
alt="...">
<div>
<h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
</div>
<div class="text-center" style="margin-top:auto;">
<span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
</div>
<div>
<h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$2499.99</span></span> $1499.99</h5>
</div>
<div class="text-center" style="margin-top:auto;">
<button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
</div>
</div>
<div class="col-sm-6 col-md-3" style="cursor:pointer; transition: border .2s ease-in-out; margin:15px; border: 1px solid #ddd; border-radius: 4px; height:auto; box-shadow: 0 2px 3px rgba(0,0,0,.075);">
<img style="vertical-align: middle;" class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
<div>
<h4 style="overflow-wrap: break-word; word-wrap: break-word;" class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
</div>
<div class="text-center" style="margin-top:auto;">
<span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
</div>
<div>
<h5 class="text-center" style="margin-right:5px; font-size:18px;"><span style="text-decoration: line-through; color:black; font-size:22px;"><span style="color:red; font-size:20px">$349</span></span> $249</h5>
</div>
<div class="text-center">
<button class="btn btn-success add_to_cart" style="margin-bottom:5px;">Add to cart</button>
</div>
</div>
</div>这是这样的：
我希望第一个flexbox中的“ -67％off”及其下面的所有元素与第二个flexbox中的相同元素高度匹配。如您所见，我已经在包含优惠的div中使用
style="margin-top:auto;"（现在优惠67％，现在优惠40％），但它与底部不对齐。这就是我想要的样子：
此外，当在移动设备中查看此代码时，或者通过减小浏览器窗口的大小，三个div会成功对齐到底部。
我想念什么？
最佳答案
有两种解决方法。
一般方式
用min-height将图像产品和标题包装在包装纸中。显然，min-height应该足以满足其中的最高要求。
具体方法
通常这样做会更好，因为与其对页面上所有产品的min-width进行硬编码，还不如将它们调整为该行中最高产品的高度。您仍然需要包装图像和产品标题，但是要提供整个产品而不是min-height
display:flex;
flex-direction: column;
...并给所述包装器
flex-grow: 1。这将使行中的所有产品都增长到与最高匹配的高度，并将额外的高度赋予flex-grow: 1的唯一子元素（这是您的包装器）。工作示例：
.products {
display: flex;
flex-wrap: wrap;
}
.product {
cursor:pointer;
transition: border .2s ease-in-out;
margin:15px;
border: 1px solid #ddd;
border-radius: 4px;
height:auto;
box-shadow: 0 2px 3px rgba(0,0,0,.075);
}
.product img {
vertical-align: middle;
width: 100%;
height: auto;
}
.product h4 {
overflow-wrap: break-word;
word-wrap: break-word;
}
.product h5 {
margin-right:5px;
font-size:18px;
}
.add_to_cart {
margin-bottom:5px;
}
/* here's the magic */
.product {
display: flex;
flex-direction: column;
}
.product-body {
flex-grow: 1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row products">
<div class="col-sm-6 col-md-3 product">
<div class="product-body">
<img style="" class="img-responsive" src="https://i.dell.com/das/xa.ashx/global-site-design%20web/00000000-0000-0000-0000-000000000000/1/LargePNG?id=Dell/Product_Images/Dell_Client_Products/Notebooks/Latitude_Notebooks/12_7275/global_spi/notebook-latitude-12-7275-black-left-windows-hero-504x350.psd"
alt="...">
<div>
<h4 class="text-center">Laptop Dell XPS 9250 12.5" (m56Y57/8GB/256GB/ HD)</h4>
</div>
</div>
<div class="text-center" style="margin-top:auto;">
<span style="color:yellow;background-color:red;font-size:18px;">-67% OFF NOW!</span>
</div>
<div>
<h5 class="text-center">
<span style="text-decoration: line-through; color:black; font-size:22px;">
<span style="color:red; font-size:20px">$2499.99</span>
</span>
$1499.99
</h5>
</div>
<div class="text-center" style="margin-top:auto;">
<button class="btn btn-success add_to_cart">Add to cart</button>
</div>
</div>
<div class="col-sm-6 col-md-3 product">
<div class="product-body">
<img class="img-responsive" src="https://external.webstorage.gr/Product-Images/1312102/quest-slimbook-convertible-1000-1312102.jpg" alt="...">
<div>
<h4 class="text-center">Laptop Quest Slimbook 360 Convertible - 13.3" (Celeron N3350/4GB/32GB/HD)</h4>
</div>
</div>
<div class="text-center" style="margin-top:auto;">
<span style="color:yellow;background-color:red;font-size:18px;">-40% OFF NOW!</span>
</div>
<div>
<h5 class="text-center">
<span style="text-decoration: line-through; color:black; font-size:22px;">
<span style="color:red; font-size:20px">$349</span>
</span>
$249
</h5>
</div>
<div class="text-center">
<button class="btn btn-success add_to_cart">Add to cart</button>
</div>
</div>
</div>
</div>