フレックスボックス レイアウト内のすべての要素の幅を均等にするにはどうすればよいですか?

フレックスボックス: すべての要素の幅を均等にする

さまざまな項目数量を使用してレスポンシブなフレックスボックス ナビゲーションバーを作成しようとすると、開発者は要素間の幅の配分の問題に遭遇する可能性があります。不均一です。この記事では、この課題の解決策を検討します。

背景

このチュートリアルでは、最初は表示:テーブルを使用して均等な幅の分散を実現しましたが、フレックスボックスに移行するときに問題が発生しました。 Flexbox のデフォルトのフレックスベースは自動で、コンテンツ サイズが各フレックス項目の初期サイズとして使用されます。その結果、コンテンツ サイズが大きいアイテムはより多くのスペースを占有します。

解決策: フレックス ベースを 0 に設定

すべての要素の幅を均等にするために、フレックス ベースを 0 に設定します。これにより、最初のサイズに基づいて、残りのすべてのスペースが比例的に分配されるようにします。 flex-grow.

例

次のコード スニペットは、flex-basis を 0 に設定することで問題がどのように解決されるかを示しています。

li {
  flex-grow: 1;
  flex-basis: 0;
  /* ... */
}

視覚的な説明

CSS Flexbox 仕様の以下の図は、次の概念を示しています。 flex-basis:

[CSS Flexbox 仕様の図]

作業例

等幅分布を観察するために変更された Fiddle を参照します:

[作業フィドル]

以上がフレックスボックス レイアウト内のすべての要素の幅を均等にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。