Question

我需要一个网格，我只指定项目的最小宽度。

这是我尝试使用flex-wrap和flex-basis：https://jsfiddle.net/2z9pgjfg/1/

HTML：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS：

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

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

Answer 1

将flex增长为0。

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: red;
  border: 1px solid black;
  flex: 0;
  flex-basis: 150px;
}

.item:after {
  content: "";
  display: block;
  padding-bottom: 75%;
}

＆＃13;

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

如何使包装弹性网格中的孤立项不会增长到最后一行？

1 个答案: