フレックスボックス ナビゲーションの不等幅を修正するにはどうすればよいですか?

要素の幅が等しくない場合のフレックスボックスのトラブルシューティング

フレックスボックス ナビゲーション レイアウトを作成する場合、要素間で幅を均等に配分することが重要です。ただし、要素のサイズが異なる場合に問題が発生する場合があります。これは、フレックス アイテムの初期サイズを定義するプロパティであるフレックス ベースの影響によって発生する可能性があります。

デフォルトのフレックス ベース

デフォルトでは、フレックス ベースは自動に設定されています。これは、フレックス項目の初期サイズがそのコンテンツのサイズによって決定されることを意味します。この例では、テキスト コンテンツが多い要素は、フレックス ベースが大きいため、より多くのスペースを受け取ります。

フレックス ベースをゼロに設定する

均等な幅の配分を確保するには、フレックス ベースを設定します。すべての要素の基準を 0 にします。これにより、初期サイズがリセットされ、残りのスペースが flex-grow (デフォルトで 1 に設定されている) に基づいて比例的に分割されるようになります。更新されたコードは次のとおりです:

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

フィドルの例

このコード調整により、フレックスボックス ナビゲーション内のすべての要素の幅が同じになる、望ましい結果が得られます:

[更新Fiddle](https://fiddle.jshell.net/h2db4yxw/11/)

視覚化

フレックスボックス仕様の次の図は、フレックス ベースの概念と要素への影響を示しています。 sizing:

[フレックスボックスからのフレックスベースの図仕様](https://www.w3.org/TR/css-flexbox-1/#flex-basis-property)

以上がフレックスボックス ナビゲーションの不等幅を修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。