在动态调整八个元素的大小时，如何使用 Flexbox 强制两行四个元素？-css教程-PHP中文网

在动态调整八个元素的大小时，如何使用 Flexbox 强制两行四个元素？

Susan Sarandon

发布： 2024-12-29 08:07:10

原创

295 人浏览过

How to Force Two Rows of Four Elements Each Using Flexbox When Dynamically Resizing Eight Elements?

Flexbox布局：每行4个元素

在使用Flexbox动态调整页面上8个元素尺寸时，如何强制将其分为两行（每行4个）？

给定以下代码片段：

<div class="parent-wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

登录后复制

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}

.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

登录后复制

解决方案：

问题在于flex容器上的flex-wrap: wrap，它允许元素换行。但是，flex-grow: 1在元素上允许无限制地生长，导致它们在空间不足时无法换行。

解决方案是为元素定义一个宽度，迫使其换行：

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* 展开说明如下 */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

登录后复制

flex属性的第一个值（在我们的示例中为1）将空间均匀分配给所有元素，第二个值（为0）最小宽度设置为0，第三个值（为21%）定义了元素的最大宽度为可用的21% 。通过这样设置，元素将在达到最大宽度之前换行，从而创建每行4个元素的布局。

以上是在动态调整八个元素的大小时，如何使用 Flexbox 强制两行四个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！