1つ以上の要素が他のナビゲーション項目から分離されているナビゲーションのパターンです。
要件
一般的なナビゲーションのパターンは、ある要素を他の要素から押しのけることです。 2セットの項目を2つの別々のフレックスコンテナにする必要なく、フレックスボックスを使用してこれを実現できます。
レシピ
行った選択
このパターンは、自動マージンとフレックスボックスを組み合わせて項目を分割します。
自動マージンは、適用される方向に利用可能なすべてのスペースを吸収します。 これは、自動マージンを使ってブロックを中央に配置する方法です — ブロックの両側にスペースをすべて取ろうとすると、ブロックが中央に押し込まれます。
この場合、左の自動マージンは利用可能なスペースをすべて占め、項目を右に押します。 リスト内の任意の項目にクラス push を適用できます。
ブラウザー実装状況
さまざまなレイアウト方法が異なるブラウザーサポートを持っています。 使用されているプロパティの基本的なサポートの詳細については、以下の表を参照してください。
フレックスボックス
Update compatibility data on GitHub | デスクトップ | モバイル |
|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Android 版 Chrome | Android 版 Firefox | Android 版 Opera | iOSのSafari | Samsung Internet |
|---|
flex | Chrome
完全対応
29-
完全対応
29
-
完全対応
21
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Edge
完全対応
12-
完全対応
12
-
完全対応
12
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Firefox
完全対応
20-
完全対応
20
- 補足 Since Firefox 28, multi-line flexbox is supported.
- 補足 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at
0. - 補足 Until Firefox 61, flex items that are sized according to their content are sized using
fit-content, not max-content. -
未対応
18 — 28
- 無効 From version 18 until version 28 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. -
完全対応
49
- 接頭辞付き -webkit- のベンダー接頭辞が必要
-
完全対応
48
- 接頭辞付き -webkit- のベンダー接頭辞が必要
- 無効 From version 48: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| IE
完全対応
11-
完全対応
11
- 補足 Internet Explorer 11 ignores uses of
calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. - 補足 Internet Explorer 11 considers a unitless value in the
flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info. -
完全対応
10
- 接頭辞付き -ms- のベンダー接頭辞が必要
- 補足 Internet Explorer 10 and 11 ignore uses of
calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. - 補足 Internet Explorer 10 and 11 consider a unitless value in the
flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.
| Opera
完全対応
12.1 | Safari
完全対応
9-
完全対応
9
-
完全対応
6.1
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| WebView Android
完全対応
4.4-
完全対応
4.4
-
完全対応
≤37
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Chrome Android
完全対応
29-
完全対応
29
-
完全対応
25
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Firefox Android
完全対応
20-
完全対応
20
- 補足 Since Firefox 28, multi-line flexbox is supported.
- 補足 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at
0. - 補足 Until Firefox 61, flex items that are sized according to their content are sized using fit-content, not max-content.
-
未対応
18 — 28
- 無効 From version 18 until version 28 (exclusive): this feature is behind the
layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. -
完全対応
49
- 接頭辞付き -webkit- のベンダー接頭辞が必要
-
完全対応
48
- 接頭辞付き -webkit- のベンダー接頭辞が必要
- 無効 From version 48: this feature is behind the
layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| Opera Android
完全対応
12.1 | Safari iOS
完全対応
9-
完全対応
9
-
完全対応
7
- 接頭辞付き -webkit- のベンダー接頭辞が必要
| Samsung Internet Android
完全対応
2.0-
完全対応
2.0
-
完全対応
1.5
- 接頭辞付き -webkit- のベンダー接頭辞が必要
|
|---|
凡例
-
完全対応
- 完全対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報