1つ以上の要素が他のナビゲーション項目から分離されているナビゲーションのパターンです。
要件
一般的なナビゲーションのパターンは、ある要素を他の要素から押しのけることです。 2セットの項目を2つの別々のフレックスコンテナにする必要なく、フレックスボックスを使用してこれを実現できます。
レシピ
行った選択
このパターンは、自動マージンとフレックスボックスを組み合わせて項目を分割します。
自動マージンは、適用される方向に利用可能なすべてのスペースを吸収します。 これは、自動マージンを使ってブロックを中央に配置する方法です — ブロックの両側にスペースをすべて取ろうとすると、ブロックが中央に押し込まれます。
この場合、左の自動マージンは利用可能なスペースをすべて占め、項目を右に押します。 リスト内の任意の項目にクラス push
を適用できます。
ブラウザー実装状況
BCD tables only load in the browser
さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.