Flexbox はナビゲーション バー項目を均等に配置する問題をどのように解決できるでしょうか?

ナビゲーション バーの分散の強化: 最新のアプローチ

指定されたコンテナ全体に固定水平ナビゲーション アイテムを均等かつ完全に拡張することは、依然として Web デザインにおける一般的な課題です。この問題を完全に理解するために、この議論のきっかけとなった質問を検討することから始めます。

問題の説明

ユーザーは、6 つのナビゲーション項目を 900 ピクセルのコンテナ全体に均等に分散し、その間の空白スペースを一貫して確保することを目的としています。彼ら。最初に、ユーザーは次の CSS および HTML コードを使用しました:

nav ul {
  width: 900px;
  margin: 0 auto;
}

nav li {
  line-height: 87px;
  float: left;
  text-align: center;
  width: 150px;
}

• HOME
• ABOUT
• BASIC SERVICES
• OUR STAFF
• CONTACT US

しかし、このアプローチには 2 つの制限がありました:

1. コンテナ内で項目が均等に分散されます。
2. レイアウトが事前定義された項目の幅に制限され、長い項目の場合に問題が発生しました。 150 ピクセルの制限を超えました。

Flexbox を使用した最新のソリューション

最新の Web デザインでは、この問題に対する最適な解決策は CSS を介してフレックスボックス モデルを利用します。次の宣言をコンテナに適用することで、目的のディストリビューションを実現できます。

.container {
  display: flex;
  justify-content: space-between;
}

表示: flex;プロパティはフレックスボックスを有効にし、コンテナをフレックスボックス コンテナに変換します。 justify-content: space-between;プロパティは、アイテムをコンテナ内で均等に配置し、端に揃えます。

justify-content 値の効果

希望する配置に応じて、justify-content のさまざまな値を使用できます。

• space-between: 項目は均等に分散され、最初の項目はコンテナの開始点と最後の項目と同じ高さになります。
• space-around: アイテムの両側に半角のスペースがあります。
• space-evenly: アイテムの周囲に等しいスペースがあります。

コード例

これは、フレックスボックスを使用してナビゲーションを均等に分散する例を示しています。 items:

.nav-container {
  display: flex;
  justify-content: space-between;
}

.nav-item {
  background-color: gold;
  padding: 10px;
}

<div class="nav-container">
  <div class="nav-item">HOME</div>
  <div class="nav-item">ABOUT</div>
  <div class="nav-item">SERVICES</div>
  <div class="nav-item">TEAM</div>
  <div class="nav-item">CONTACT US</div>
</div>

注: このソリューションには、最新のブラウザーのサポートが必要です。古いブラウザとの下位互換性のために、追加の CSS を使用できます。

以上がFlexbox はナビゲーション バー項目を均等に配置する問題をどのように解決できるでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。