コンテンツが異なるフレックスボックス要素間で幅を均等に配分するにはどうすればよいですか?

フレックスボックス: 要素間で幅を均等に分配する

さまざまな数の項目 (3 から 5 の間) を含むフレックスボックス ナビゲーションを作成しようとしています。の場合、幅が要素間で均等に配分されないという問題が発生しました。これに対処するには、「flex-basis」を理解することが重要です。

「flex-basis」は、基本的にフレックス項目の初期サイズを設定するフレックスボックスの必須プロパティです。デフォルトでは、「自動」に設定されています。これは、フレックス項目のサイズがそのコンテンツによって決定されることを意味します。したがって、テキスト コンテンツが大きいアイテムは、自然により多くのスペースを占有することになります。

均等な分散を確保するには、「flex-basis」を 0 に設定することをお勧めします。これにより、初期サイズが 0 に設定され、残りのスペースは

ここでは、「flex-basis」を に設定して更新されたコードのスニペットを示します。 0:

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

この調整により、コンテンツのサイズに関係なく、ナビゲーション項目間の幅が均等に配分されます。以下はデモンストレーション用の実例です: [更新されたフィドルへのリンク]

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