html - 使用 Flexbox 强制每行最少元素

Question

使用 CSS flex，是否可以强制每行包含相同数量的元素？

我能够让元素包装起来，但每行的数量不同 ( Fiddle )。

.container {
    display: flex;
    flex-flow: row wrap;
    position: relative;
}

.container > div {
    padding: 49px;
    flex: 1;
    box-sizing: border-box;
}

这是我要完成的工作的图表:

Answer 1

可能您正在寻找数量查询，您可以根据列表中的多少项更改样式

a list apart article

.container {
  display: flex;
  flex-flow: row wrap;
  border: solid 1px green;
}
.container > div {
  flex: 1 0;
  background-color: lightgreen;
  height: 30px;
  margin: 5px;
}


.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item {
  flex-basis: 30%;  
}

.item:first-child:nth-last-child(4),
.item:first-child:nth-last-child(4) ~ .item {
  flex-basis: 40%;  
}

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