Html 如何使包装柔性网格中的孤立项不增长以填充最后一行?
我需要一个网格,其中我只指定项目的最小宽度 以下是我使用flex wrap和flex basis的尝试: HTML: 我希望最后一行中的任何项目与所有其他项目的大小相同。有没有办法在没有媒体查询的情况下实现这一点?将flex grow设置为0Html 如何使包装柔性网格中的孤立项不增长以填充最后一行?,html,css,flexbox,Html,Css,Flexbox,我需要一个网格,其中我只指定项目的最小宽度 以下是我使用flex wrap和flex basis的尝试: HTML: 我希望最后一行中的任何项目与所有其他项目的大小相同。有没有办法在没有媒体查询的情况下实现这一点?将flex grow设置为0 .container{ 显示器:flex; 柔性包装:包装; } .项目{ 背景色:红色; 边框:1px纯黑; 弹性:0; 弹性基准:150px; } .项目:在{ 内容:“; 显示:块; 垫底:75%; } <div class="conta
.container{
显示器:flex;
柔性包装:包装;
}
.项目{
背景色:红色;
边框:1px纯黑;
弹性:0;
弹性基准:150px;
}
.项目:在{
内容:“;
显示:块;
垫底:75%;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
background-color: red;
border: 1px solid black;
flex: 1;
flex-basis: 150px;
}
.item:after {
content: "";
display: block;
padding-bottom: 75%;
}