在動態調整八個元素的大小時，如何使用 Flexbox 強制兩行四個元素？

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中文網其他相關文章！