Flexbox を使用して 1 行に 4 つの項目を確保するにはどうすればよいですか?

フレックスボックス: 行ごとに 4 項目を強制する

レスポンシブ デザインの領域では、フレックスボックスは要素をレイアウトするための強力なツールを提供します。ただし、行あたりの項目数を強制するなど、特定のレイアウトを実現するのは必ずしも簡単ではありません。

問題を理解する

元のクエリで説明されているように、目標は 8 個を表示することです。 1 行あたり 4 つのアイテムという一貫した配置を維持しながら、フレックスボックス コンテナー内のアイテムを配置します。デフォルトでは、フレックスボックスは利用可能なスペースに沿ってアイテムを均等に配置します。そのため、アイテムの数が目的の幅を超えると、行が不均一になることがよくあります。

解決策: Flex-Grow をオーバーライドします

このシナリオでは、この問題は、個々の flex 項目に適用される flex-grow プロパティに起因します。 Flex-grow は、使用可能なスペースを占めるように項目を拡張するように指示します。ただし、項目には幅が定義されていないため、継続的にゼロに縮小し、折り返されることはありません。

行ごとに特定の数の項目を強制するための鍵は、フレックス項目で幅を定義することです。固定幅を設定すると、各項目があらかじめ決められたスペースを占有し、使用可能なスペースを超えると強制的に折り返されます。

実装

次の CSS コードは、8 つの項目が確実に表示されるようにする方法を示しています。 2列に4:

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

.child {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

• フレックス: 1 0 21%; - このフレックス省略表現プロパティ:

  • 1: これに比例して (利用可能なスペースがある場合) 項目を拡大するように指示します。 value.
  • 0: アイテムの縮小を防ぐためのアイテムの最小幅を設定します。
  • 21: 個々のアイテムの幅を次のように定義します。親コンテナの幅の 21%。 flex 値に基づいて、これにより 4 つの項目が各行に収まるようになります。
• Flex-wrap: Wrap; - 項目を次の行に折り返すことができます。コンテナ幅が足りない場合

結論

コンテナ幅を固定幅に設定することでフレックス アイテムを追加し、フレックス ラッピングを有効にすると、フレックスボックス レイアウトで行ごとに特定の数のアイテムを強制することが可能になります。この手法により、デザイナーは Web 要素の応答性とレイアウトをより詳細に制御できるようになります。

以上がFlexbox を使用して 1 行に 4 つの項目を確保するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。