ナビゲーションの分割

1つ以上の要素が他のナビゲーション項目から分離されているナビゲーションのパターンです。

2つのグループに分けられた項目。

要件

一般的なナビゲーションのパターンは、ある要素を他の要素から押しのけることです。 2セットの項目を2つの別々のフレックスコンテナにする必要なく、フレックスボックスを使用してこれを実現できます。

レシピ

行った選択

このパターンは、自動マージンとフレックスボックスを組み合わせて項目を分割します。

自動マージンは、適用される方向に利用可能なすべてのスペースを吸収します。 これは、自動マージンを使ってブロックを中央に配置する方法です — ブロックの両側にスペースをすべて取ろうとすると、ブロックが中央に押し込まれます。

この場合、左の自動マージンは利用可能なスペースをすべて占め、項目を右に押します。 リスト内の任意の項目にクラス push を適用できます。

ブラウザー実装状況

BCD tables only load in the browser

さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。

フレックスボックス

関連情報