使用 flex-wrap 移动到下一行时保持 div 宽度的 Flex 框设计 [重复]答案

【问题标题】：Flex box design to maintain div width when moved to next line using flex-wrap [duplicate]使用 flex-wrap 移动到下一行时保持 div 宽度的 Flex 框设计 [重复]
【发布时间】：2021-09-20 06:19:21
【问题描述】：

我有这个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 更好

【问题讨论】：

标签： html css sass flexbox less

【解决方案1】：

不要让它成长怎么样，demo here

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

【讨论】：

【解决方案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>

【讨论】：