1 行に 4 つのアイテムを含む 2 行のフレックスボックス グリッドを作成するにはどうすればよいですか?

Flexbox: 1 行あたり 4 つのアイテムを含む 2 行グリッドの作成

Flexbox は、動的で応答性の高い Web ページを作成するための強力なレイアウト システムを提供します。一般的な使用例の 1 つは、ビューポート サイズの変更に応じてアイテムを自動的にラップしてサイズ変更するグリッド状のレイアウトを作成することです。

問題: アイテムを複数の行にラップする

特定のシナリオでは、フレックスボックス コンテナーで 8 つの項目が 4 つの項目の 2 行に分割されず、1 行に表示されるという問題に直面しています。 each.

解決策: フレックスボックスのプロパティを理解する

項目を強制的に 2 行に配置するには、flex-wrap と flex-grow の 2 つのフレックスボックス プロパティを調整する必要があります。

フレックスラップ: Wrap

flex-wrap プロパティは、コンテナ内の項目をラップして複数の行を形成できるかどうかを制御します。折り返すように設定すると、必要に応じて項目を新しい行にフローできるようになります。

flex-grow: 1

flex-grow プロパティは、項目がどのように表示されるかを制御します。アイテムはコンテナ内の余分なスペースを分配します。値 1 は、各項目がその行上の利用可能なスペースを埋めるために比例的に拡大することを意味します。

問題: デフォルト値の上書き

元のコードでは、flex -wrap はラップするように設定されましたが、flex 項目では flex-grow が 1 に設定されました。その結果、項目が利用可能な幅全体を占めるまで大きくなり、折り返せなくなりました。

修正: 項目の幅の定義

問題を解決するには、次のことを行う必要があります。項目が大きくなりすぎて強制的に折り返されないように、項目の特定の幅を定義します。修正されたコードでは、次の 3 つの値を持つ flex プロパティを使用しました。

1. flex: 1 0 21%; - 最初の値 (1) はアイテムの成長係数を 1 に設定します。これは flex-grow: 1 と同じです。
2. flex: 1 0 21%; - 2 番目の値 (0) はアイテムの収縮率を 0 に設定します。これは、アイテムが指定された幅以下に縮まないことを意味します。
3. flex: 1 0 21%; - 3 番目の値 (21%) は、項目の初期幅をコンテナの幅の 21% に設定します。

項目の幅を定義することで、項目がそれぞれ 4 つの項目の 2 行に適切に折り返されるようになります。

以上が1 行に 4 つのアイテムを含む 2 行のフレックスボックス グリッドを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。