弹性物品不“伸展”答案

【问题标题】：Flex items not 'stretching'弹性物品不“伸展”
【发布时间】：2020-09-11 07:31:11
【问题描述】：

我正在使用 CSS Flex Box 在 MOBILE 视图上显示我的 woocommerce 商店中的商品。 http://www.crussh.com/shop/

在外箱我有以下css

@media screen and (max-width: 768px)
#wpv-view-layout-16231-TCPID16485 {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 0 10px;
}

项目css如下

@media screen and (max-width: 768px)
body.woocommerce .item {
    border: 1px solid #eee;
    text-align: center;
    padding-bottom: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: calc(50% - 30px) !important;
    padding: 0 10px 10px !important;
    box-shadow: 0px 1px 0px rgba(0,0,0,.1);
    background: #fff;
    height: 100%;
    border-radius: 10px;
}

但由于某种原因，项目没有拉伸..Click here for image 如何使产品项目框的高度相同？谢谢

【问题讨论】：

访问该 URL 会导致数千个控制台错误。您的媒体查询是否故意缺少括号？
太好了，你把它修好了，如果你认为这里不再需要它，你可以提出问题。

标签： css flexbox

【解决方案1】：

.item 可以使用 min-height 代替 height

@media screen and (max-width: 768px)
body.woocommerce .item {
    border: 1px solid #eee;
    text-align: center;
    padding-bottom: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: calc(50% - 30px) !important;
    padding: 0 10px 10px !important;
    box-shadow: 0px 1px 0px rgba(0,0,0,.1);
    background: #fff;
    min-height: 100%;
    border-radius: 10px;
}

【讨论】：

【解决方案2】：

我让它工作了。我将 .item 中的 height 属性更改为 auto..

.item {
    border: 1px solid #eee;
    text-align: center;
    padding-bottom: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: calc(50% - 30px) !important;
    padding: 0 10px 10px !important;
    box-shadow: 0px 1px 0px rgba(0,0,0,.1);
    background: #fff;
    height: auto;
    border-radius: 10px;
}

【讨论】：