使用 flex-wrap 移动到下一行时，Flex box 设计保持 div 宽度

Question

我有这个 demo code，其中 5 、 6 和 7 的宽度与上面的 div 不同。

一种简单的方法是添加隐藏的空 div。但是，有没有更好的方法呢？

.parent-wrapper {
    height:100%;
    width: 400px;
    border: 1px solid black;
}
.parent {
    display: flex;
    flex-wrap:wrap;
}
.child {
    background:blue;
    flex: 1 0 21%;
    height:100px;
    margin: 5px;
}

<body>
    <div class="parent-wrapper">
        <div class="parent">
            <div class="child">1</div>
            <div class="child">2</div>
            <div class="child">3</div>
            <div class="child">4</div>
            <div class="child">5</div>
            <div class="child">6</div>
            <div class="child">7</div>
        </div>
    </div>
</body>

最后，我想使用一些动态值来渲染它，所以我认为 CSS 方法比添加空 div 更好

Answer 1

不让它长大怎么样，demo here

.child {
    background:blue;
    flex: 0 0 21%; //<-- note 0 here
    height:100px;
    margin: 5px;
}

Answer 2

如果你可以使用CSS grid，就很容易做到，如下例：

.parent-wrapper {
  height:100%;
  width: 400px; 
}
.parent {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  gap: 5px;
}
.child {
  background:blue;
  height:100px;
}

  <div class="parent-wrapper">
    <div class="parent">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
      <div class="child">7</div>
    </div>
  </div>

使用 flex-wrap 移动到下一行时，Flex box 设计保持 div 宽度

Flex box design to maintain div width when moved to next line using flex-wrap

html

css

sass

less

flexbox