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

编程问答 2022-04-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 更好

解决方法

不让它成长怎么样，demo here

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

如果您可以使用 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>

flexboxflexboxhtmllesssasssass