Html 如何使包装柔性网格中的孤立项不增长以填充最后一行?

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

我需要一个网格,其中我只指定项目的最小宽度

以下是我使用flex wrap和flex basis的尝试:

HTML:

我希望最后一行中的任何项目与所有其他项目的大小相同。有没有办法在没有媒体查询的情况下实现这一点?

将flex grow设置为0

.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%;
}