CSS Flexbox

1
2
3
4
5
6
7
8

実際に試してみましょう

CSS Flexbox レイアウトモジュール

フレックスボックスレイアウトモジュール（発表される前）には、以下の4つのレイアウトモードが利用可能でした：

  • ブロック（Block）は、ウェブページの一部（セクション）に使用されます
  • インライン（Inline）は、テキストに使用されます
  • テーブルは、2次元テーブルデータに使用されます
  • ポジショニングは、要素の明確な位置に使用されます

フレックスボックスレイアウトモジュールは、フロートやポジショニングを使用せずに柔軟なレスポンシブレイアウト構造を簡単に設計できます。

ブラウザのサポート

すべての現代ブラウザがサポートしています flexbox 属性。

29.0 11.0 22.0 10 48

Flexbox 要素

Flexbox モデルを使用し始めるためには、まず Flex コンテナを定義する必要があります。

1
2
3

上の要素は、3つのflexアイテムを持つflexコンテナ（青いエリア）を表します。

例

が3つのflexアイテムを持つflexコンテナを含んでいます：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

実際に試してみましょう

親要素（コンテナ）

を通じて display 属性が設定される： flex、flexコンテナは可変性を持つ：

1
2
3

例

.flex-container {
  display: flex;
}

実際に試してみましょう

以下はflexコンテナ属性です：

flex-direction 属性

flex-direction 属性はコンテナがflexアイテムをどの方向に積み重ねるかを定義します。

1
2
3

例

column 値は垂直にflexアイテムを積み重ねます（上から下）：

.flex-container {
  display: flex;
  flex-direction: column;
}

実際に試してみましょう

例

column-reverse 値は垂直にflexアイテムを積み重ねます（下から上）：

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

実際に試してみましょう

例

row 値は水平にflexアイテムを積み重ねます（左から右）：

.flex-container {
  display: flex;
  flex-direction: row;
}

実際に試してみましょう

例

row-reverse 値は水平にflexアイテムを積み重ねます（右から左）：

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

実際に試してみましょう

flex-wrap 属性

flex-wrap 属性はflexアイテムに折り返すかどうかを定義します。

以下の例では、flex-wrap属性をよりよく説明するために12個のflexアイテムを含んでいます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

例

wrap 値は必要に応じてflexアイテムに折り返されることを定義します：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

実際に試してみましょう

例

nowrap 値はflexアイテムに折り返されないことを定義します（デフォルト）：

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

実際に試してみましょう

例

wrap-reverse 値は必要に応じて、エラストイックアイテムが逆の順序で折り返されることを定義します：

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

実際に試してみましょう

flex-flow 属性

flex-flow 属性はflex-directionとflex-wrap属性を同時に設定するショートカット属性です。

例

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

実際に試してみましょう

justify-content 属性

justify-content 属性はflexアイテムに対齐を用意しています：

1
2
3

例

center 値はflexアイテムをコンテナの中心に揃えます：

.flex-container {
  display: flex;
  justify-content: center;
}

実際に試してみましょう

例

flex-start 値はflexアイテムをコンテナの先頭に揃えます（デフォルト）：

.flex-container {
  display: flex;
  justify-content: flex-start;
}

実際に試してみましょう

例

flex-end 値はflexアイテムをコンテナの端に揃えます：

.flex-container {
  display: flex;
  justify-content: flex-end;
}

実際に試してみましょう

例

space-around 値は行の前、中、後にスペースを持つflexアイテムを表示します：

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

実際に試してみましょう

例

space-between 値は行間にスペースがあるflexアイテムを表示します：

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

実際に試してみましょう

align-items 属性

align-items 属性はflexアイテムの垂直に対齐を用意しています。

1
2
3

これらの例では、align-items属性をよりよく説明するために200ピクセルの高さのコンテナを使用しています。

例

center 値はflexプロジェクトをコンテナの中央にアライメントします：

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

実際に試してみましょう

例

flex-start 値はflexプロジェクトをコンテナの上部にアライメントします：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

実際に試してみましょう

例

flex-end 値はエラストプロジェクトをコンテナの下部にアライメントします：

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

実際に試してみましょう

例

stretch 値はflexプロジェクトを伸ばしてコンテナを満たします（デフォルト）：

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

実際に試してみましょう

例

baseline 値はflexプロジェクトのベースラインをアライメントします：

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

実際に試してみましょう

注意：この例では、テキストのベースラインに基づいてプロジェクトがアライメントされていることをfont-sizeの異なる使用で説明します：

1
2
3
4

align-content 属性

align-content 属性はエラストラインのアライメントに使用されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

これらの例では、600ピクセルの高さのコンテナを使用し、flex-wrap属性をwrapに設定して、align-content属性をよりよく説明します。

例

space-between 値はエラストライン間に均等なスペースを持って表示します：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

実際に試してみましょう

例

space-around 値はエラストラインの前に、中間、後ろにスペースを持って表示します：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

実際に試してみましょう

例

stretch 値はエラストラインを伸ばして残りのスペースを占めます（デフォルト）：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

実際に試してみましょう

例

center 値はコンテナの中央にエラストラインを表示します：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

実際に試してみましょう

例

flex-start 値はコンテナの先頭にエラストラインを表示します：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

実際に試してみましょう

例

flex-end 値はコンテナの最後にエラストラインを表示します：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

実際に試してみましょう

完璧な中央配置

以下の例では、非常に一般的なスタイル問題を解決します：完璧な中央配置。

解決策： justify-content および align-items 属性を中央に設定すると、flexプロジェクトは完璧に中央に配置されます：

例

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

実際に試してみましょう

子要素（プロジェクト）

flexコンテナの直接子要素は自動的にエラスト性（flex）プロジェクトになります。

1
2
3
4

上記の要素は灰色のエレクトリックコンテナ内の4つの青いエレクトリックプロジェクトを表します。

例

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

実際に試してみましょう

エレクトリックプロジェクトの属性には：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order 属性

order flexプロジェクトの順序を定義する。

1
2
3
4

コード内の最初のflexプロジェクトはレイアウト中表示されない必要はありません。

order 値は数字でなければなりません、デフォルト値は0です。

例

order flexプロジェクトの順序を変更できる。

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

実際に試してみましょう

flex-grow 属性

flex-grow 特定のflexプロジェクトが他のflexプロジェクトに対してどれだけ増加するかを定義する。

1
2
3

この値は数字でなければなりません、デフォルト値は0です。

例

第3のエレクトリックプロジェクトの増加速度が他のエレクトリックプロジェクトの8倍になるようにする：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

実際に試してみましょう

flex-shrink 属性

flex-shrink 特定のflexプロジェクトが他のflexプロジェクトに対してどれだけ縮小するかを定義する。

1
2
3
4
5
6
7
8
9

この値は数字でなければなりません、デフォルト値は0です。

例

第3のエレクトリックプロジェクトが他のエレクトリックプロジェクトと同じくらい縮小しないように：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

実際に試してみましょう

flex-basis 属性

flex-basis flexプロジェクトの初期長さを定義する。

1
2
3
4

例

第3のエレクトリックプロジェクトの初期長さを200ピクセルに設定する：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

実際に試してみましょう

flex 属性

flex flex-grow、flex-shrink、flex-basis 属性の短縮属性です。

例

第3のエレクトリックプロジェクトを拡張不可（0）、縮小不可（0）、初期長さ200ピクセルに設定する：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

実際に試してみましょう

align-self 属性

align-self エレクトリックコンテナ内の選択されたプロジェクトのアライメント方法を定義する。

align-self 属性は、コンテナの align-items 属性で設定されたデフォルトのアライメントをオーバーライドします。

1
2
3
4

これらの例では、align-self 属性をよりよく説明するために 200ピクセルの高さのコンテナを使用しています：

例

第3つのエラストイックなプロジェクトをコンテナの中央にアライメントします：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

実際に試してみましょう

例

第2つのエラストイックなプロジェクトをコンテナのトップにアライメントし、第3つのエラストイックなプロジェクトをコンテナのボトムにアライメントします：

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

実際に試してみましょう

Flexboxのレスポンシブイメージライブラリの使用

flexbox を使用して、スクリーンサイズに応じて4枚、2枚、または全幅の画像間で変化するレスポンシブなイメージライブラリを作成します：

実際に試してみましょう

Flexboxのレスポンシブウェブサイトの使用

flexbox を使用して、エラストイックなナビゲーションバーとエラストイックなコンテンツを含むレスポンシブウェブサイトを作成します：

実際に試してみましょう

CSS Flexbox 属性

以下の表は、flexbox と一緒に使用される CSS 属性を示しています：

属性 説明
display HTML 元素のボックスタイプを規定します。
flex-direction エラストイックなコンテナ内のエラストイックなプロジェクトの方向を規定します。
justify-content エラストイックなプロジェクトが主軸上のすべての利用可能な空間を使用していない場合、これらのプロジェクトを水平にアライメントします。
align-items エラストイックなプロジェクトが主軸上のすべての利用可能な空間を使用していない場合、これらのプロジェクトを垂直にアライメントします。
flex-wrap エラストイックなプロジェクトが一つの flex 線に収まらない場合、プロジェクトが折り返されるかどうかを規定します。
align-content flex-wrap 属性の行動を変更します。align-items に似ていますが、エラストイックなプロジェクトをアライメントしません。代わりに flex 線をアライメントします。
flex-flow flex-direction と flex-wrap のショートカット属性。
order エラストイックなプロジェクトが同一コンテナ内の他のエラストイックなプロジェクトに対する順序を規定します。
align-self エラストイックなプロジェクトに使用されます。コンテナの align-items 属性をオーバーライドします。
flex flex-grow、flex-shrink そして flex-basis 属性のショートカット属性。