Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説 -How Flexbox works 

Flexboxの基本原則は、CSSでのレイアウトを柔軟かつ直観的にすることです。
Flexboxでどのようにレイアウトをつくるのか、Flexboxで最もよく使う5つのプロパティがどのように機能するのかをアニメーションで紹介します。

Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説

How Flexbox works 

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Flexboxの基本「display: flex;」

まずは、div要素を配置した例を見てください。

「display: block;」の実装例

「display: block;」の実装例

グレーのコンテナの中に、サイズが異なる4色のdiv要素があります。div要素はデフォルトで「display: block;」を備えているので、4色のdiv要素はその行の全幅を占めます。

Flexboxを使うにはコンテナをflexコンテナにします。
コードは非常に簡単です。

「display: flex;」の実装例

「display: flex;」を記述するとflexコンテナになる

HTMLは一切変更していません。
Flexboxを使うために、「block」を「flex」に変えただけです。これだけでdiv要素はインラインで表示されるようになりました。

Flexboxを使うと、従来のCSSでは難しかった実装でも簡単に配置できるようになります。その便利なFlexboxで最もよく使う5つのプロパティの使い方を確認してみましょう。

補足

flexコンテナの主軸の方向「flex-direction」

Flexboxのコンテナには、主軸(Main)と交差軸(Cross)の2つの軸があります。デフォルトでは次のようになります。

flexコンテナの主軸と交差軸

flexコンテナの主軸と交差軸

デフォルトでは、アイテムは主軸に沿って左から右に配置されます。そのため「display: flex;」を適用すると、アイテムがデフォルトで水平に配置されます。

「flex-direction」を使用すると、この主軸を回転させることができます。

「flex-direction」の実装例

「flex-direction」で主軸を回転

ここで重要なポイントがあります、「flex-direction: column;」はアイテムを交差軸に揃えません。主軸自身を水平から垂直に変更します。

「flex-direction」には、行逆方向と列逆方向の2つのオプションがあります。

「flex-direction」の実装例

「flex-direction」のオプション

補足

flexコンテナの主軸に沿って配置「justify-content」

「justify-content」は、主軸に沿ってアイテムをどのように整列させるかを制御します。

ここで主軸と交差軸の区別をさらに深めます。まずは「flex-direction: row;」で見てみましょう。

「justify-content」には、5つの値が指定できます。

  1. flex-start
  2. flex-end
  3. center
  4. space-between
  5. space-around

それぞれの値の違いを見てましょう。

「justify-content」の実装例

「justify-content」の5つの値

「space-between」と「space-around」の違いは分かりにくいかもしれません。「space-between」は各アイテムの間に等しいスペースを与えますが、最初と最後の両端にスペースはありません。

「space-around」はアイテムの両端に同じスペースを配置し、各アイテムの間に等しいスペースを与えます(各アイテム間のスペースは両端の倍)。

注意点: 「justify-content」は主軸に沿って機能し、「flex-direction」は主軸を替えます。これらは変更させるときに重要です。

補足

flexコンテナの交差軸に沿って配置「align-items」

「justify-content」を理解していると、「align-items」は簡単です。

「justify-content」は主軸(Main)に沿って機能しましたが、「align-items」は交差軸(Cross)に沿って機能します。

flexコンテナの主軸と交差軸

flexコンテナの主軸と交差軸

「flex-direction」の横行をリセットして、軸が上記の画像と同じに見えるようにしましょう。
「flex-direction」には、5つの値が指定できます。

  1. flex-start
  2. flex-end
  3. center
  4. stretch
  5. baseline

最初の3つは「justify-content」とまったく同じです。しかし最後の2つは少し異なっています。

「stretch」はアイテムをコンテナいっぱいに配置し、「beseline」はベースラインに沿って配置されます。

「align-items」の実装例

「align-items」の5つの値

「align-items: stretch;」は、アイテムの高さをautoにしなければならないことに注意してください。auto以外を指定すると、heightプロパティはstretchを優先します。

「align-items: baseline;」は、pタグを取り去ると、アイテムの下端を整列させます。

pタグ無しの「align-items: baseline;」の実装例

pタグ無しの「align-items: baseline;」の実装例

主軸と交差軸をより説明するために、「justify-content」と「align-items」のセンタリングが「flex-direction」の「row」と「column」でどのように異なるかを見てみましょう。

センタリングの実装例

「flex-direction」の「row」と「column」の比較

「row」ではアイテムは水平の主軸に沿って配置され、「column」では垂直の主軸に沿って配置されます。どちらの場合もアイテムが縦と横の両方にセンタリングされていますが、2つには互換性がありません。

補足

flexアイテムの整列「align-self」

「align-self」はアイテムの整列を指定するもので、「align-items」での指定より優先します。

すべてのプロパティは「align-items」と同じですが、デフォルトはautoで、コンテナのalign-itemsを継承します。

これがどのように見えるか見てみましょう。
2つのアイテムに「align-self」を適用し、残りは「align-items: center;」と「flex-direction: row;」を適用します。

「align-self」の実装例

「align-self」の実装例

補足

最後に

Flexboxの使い方を簡単に解説しましたが、これらのプロパティは基本的ながら、コンテンツを整列させるために重要です。

Flexboxの更に詳しい解説は、下記ページを参考にしてください。

top of page

©2017 coliss