Flexbox アイテムの幅が均等に配分されないのはなぜですか?

フレックスボックスの幅が均等に配分されていない: 解決策

フレックスボックス ナビゲーションを作成する場合、要素間の幅が均等に配分されていることを確認することが重要です。ただし、要素の幅が均等に分割されない場合があります。この記事は、解決策を提供することでこの問題に対処することを目的としています。

前述のチュートリアルに欠けている重要な要素は、flex-basis です。これは、各フレックス項目の初期サイズを決定します。デフォルトでは、flex-basis は auto に設定されています。これは、flex アイテムのサイズがそのコンテンツに基づいて決定されることを意味します。

ただし、コンテンツ サイズが異なる要素の場合、不均等な分散が発生する可能性があります。 。すべての要素が同じ幅になるようにするには、flex-basis を 0 に設定します。これにより、flex-grow に基づいて利用可能なスペースが比例的に割り当てられます。

変更された CSS は次のとおりです:

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

flex-basis を 0 に設定すると、すべての要素が同じ初期サイズになります。残りのスペースは flex-grow に基づいて均等に分配されます。これにより、コンテンツ サイズに関係なく、すべての要素の幅が同じになります。

フレックス アイテムのサイズと分布を制御するには、フレックス ベースの概念を理解することが重要であることを覚えておいてください。希望のレイアウトを実現するために、さまざまな値を試してください。

以上がFlexbox アイテムの幅が均等に配分されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。