8 つの要素を動的にサイズ変更するときに、フレックスボックスを使用して 4 つの要素を 2 行強制的に配置するにはどうすればよいですか?

Flexbox レイアウト: 1 行あたり 4 要素

Flexbox を使用してページ上の 8 つの要素のサイズを動的に変更する場合、強制的に分割する方法2 行 (1 行あたり 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-wrap にあります。flex でラップします。要素をラップできるようにするcontainer。ただし、flex-grow: 1 では要素を無制限に拡張できるため、スペースが不足すると要素のラップに失敗します。

解決策は、要素の幅を定義して強制的に折り返すことです。

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

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

flex プロパティの最初の値 (この例では 1) は、スペースをすべての要素に均等に分配します。要素の 2 番目の値 (0) は最小幅を 0 に設定し、3 番目の値 (21%) は要素の最大幅を使用可能な幅の 21% に定義します。このように設定すると、最大幅に達する前に要素が折り返され、1 行あたり 4 要素のレイアウトが作成されます。

以上が8 つの要素を動的にサイズ変更するときに、フレックスボックスを使用して 4 つの要素を 2 行強制的に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。