フレックスボックスを使用して幅が不均一な要素を均等に配置するにはどうすればよいですか?

要素に不均等な幅を分配するフレックスボックス

問題:

フレックスボックスを使用して、項目数 (3 ～ 5) は異なりますが、幅が均等に配分されていません。

分析:

フレックスボックスは、デフォルトで flex-basis プロパティを「auto」に設定します。これは、要素のサイズがそのコンテンツに基づいて決定されることを意味します。この例では、大きなテキスト コンテンツを持つ要素がより多くのスペースを占有しています。

解決策:

均等な分散を確保するには、flex-basis: 0 を設定します。これにより、初期の flex ベースをゼロに設定し、残りのスペースを flex-grow に基づいて比例的に分配できるようにします。 flex-grow の値は、すべてが均等に展開されるように設定する必要があります。

コード:

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

説明:

flex-basis の値を 0 にすると、コンテンツに関係なく、ナビゲーション項目が同じサイズで開始されます。次に、flex-grow を 1 に設定すると、残りのスペースを埋めるために均等に拡張されます。

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