blob: af1f50c7e20870e180e28cc508934a44992ce228 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
---
title: ナビゲーションの分割
slug: Web/CSS/Layout_cookbook/Split_Navigation
tags:
- CSS
- ガイド
- レイアウト
- ナビゲーション
- 料理帳
- フレックスボックス
translation_of: Web/CSS/Layout_cookbook/Split_Navigation
---
{{CSSRef}}
1 つ以上の要素が他のナビゲーション項目から分離されているナビゲーションのパターンです。
## 要件
よくあるナビゲーションのパターンとして、ある要素を他の要素から離すというものがあります。フレックスボックスを使用すると、項目を 2 つに分けて別々のフレックスコンテナーに入れることなく、これを実現することができます。
## レシピ
{{EmbedGHLiveSample("css-examples/css-cookbook/split-navigation.html", '100%', 520)}}
> **Callout:**
>
> [この例をダウンロード](https://github.com/mdn/css-examples/blob/master/css-cookbook/split-navigation--download.html)
## 行った選択
このパターンは、自動マージンとフレックスボックスを組み合わせて項目を分割します。
マージンを auto にすると、適用される方向に利用可能なすべての空間を吸収します。 これは、 auto マージンを使ってブロックを中央に配置するのと同じ方法です。ブロックの両側にすべての空間を取ろうとするので、ブロックが中央に押し込まれます。
この場合、 auto の左マージンは利用可能な空間をすべて占め、項目を右に押します。リスト内の任意の項目にクラス `push` を適用することができます。
## ブラウザーの互換性
レイアウト方法によってブラウザーの対応状況が異なります。使用しているプロパティの基本的な対応の詳細については、以下の表を参照してください。
### フレックスボックス
{{Compat("css.properties.flex")}}
## 関連情報
- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout)
|
