固定幅コンテナ内にナビゲーション項目を均等に配置するにはどうすればよいですか?

指定したコンテナ内で水平方向のナビゲーション アイテムを均等に配置する方法

ナビゲーション メニューをデザインするときは、多くの場合、アイテムをコンテナ全体に均等に拡張して、視覚的にバランスの取れた美しさを作り出すことが望ましいです。 。この問題では、一貫した空白を使用して 900 ピクセルのコンテナ内に 6 つのナビゲーション項目を均等に分散する方法を検討して、この課題に対処することを目指しています。

従来のアプローチ: 浮動小数点幅と固定幅を使用する

一般的なアプローチは次のとおりです。 float プロパティを使用して、各ナビゲーション項目に固定幅を割り当てます。ただし、この方法では、特に項目の長さが異なる場合、空白の分布が不均一になる可能性があります。さらに、項目が指定された幅を超えると、レイアウトが壊れる可能性があります。

最新のソリューション: フレックス ボックス

最新のブラウザでは、フレックス ボックス レイアウトを使用した、より洗練されたソリューションが提供されています。コンテナ要素上で表示プロパティを flex に設定し、justify-content を space-between のような値に指定すると、アイテムは利用可能なスペース内に均等に配置されます。

Flex Box の利点:

• アイテムを均等に分配します。長さ
• コンテナの幅に自動的に調整します
• 複数の配置オプション (例: スペース周囲、スペース均等) をサポート

代替ソリューション: テキスト配置

フレックス ボックスを使用するより簡単な代替方法には、コンテナに text-align を設定して両端揃えを行うことが含まれます。これにより、項目が左右の余白に揃えられ、justify-content: space-between と同様の効果が生まれます。ただし、このメソッドをメディア クエリと組み合わせると、特定のブラウザのバグが発生する可能性があることに注意してください。

実装例

ul {
  list-style: none;
  padding: 0;
  width: 90vw;
  display: flex;
  justify-content: space-between;
}

li {
  background: gold;
}

このコード スニペットは、フレックス ボックスのアプローチを示し、アイテムをアイテム内で均等に分散します。コンテナー。アイテムの長さに関係なく、一貫した空白を確保します。

以上が固定幅コンテナ内にナビゲーション項目を均等に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。