比例的なサイズ設定を維持しながら、フレックスボックス項目を複数の行に折り返すにはどうすればよいですか?

フレックスボックス: 項目を複数行で表示する

フレックスボックスでは、複数行のレイアウトを実現するのが難しい場合があります。 8 つの項目が動的にサイズ変更され、1 行に 4 つの項目が 2 行に配置されることが予想されるシナリオを考えてみましょう。これを解決するには、いくつかの重要な調整が必要です。

まず、flex-wrap がコンテナ要素をラップするように設定されていることを確認します。これにより、デフォルトの nowrap 設定がオーバーライドされ、項目を複数の行に分割できるようになります。

ただし、主なハードルは、flex 項目に割り当てられた flex-grow: 1 プロパティにあります。このプロパティは利用可能なスペースを比例的に分配しますが、ラッピングを妨げる可能性があります。フレックス項目にはコンテンツがないため、項目は幅 0 に縮小され、単一行のままになります。

解決策は、項目の幅を指定することです。 flex: 1 0 21%; を適用すると、アイテムは次のようになります:

• Flex: 1 - Flex アイテムは利用可能なスペースを埋めるために柔軟になります。
• 0 - Flex アイテムの最小幅はゼロになり、縮小します。
• 21% - フレックス項目の優先幅は 21% となり、コンテンツを収容し、コンテナ内で均等に分散されます。

以上が比例的なサイズ設定を維持しながら、フレックスボックス項目を複数の行に折り返すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。