Flexboxでどのようにレイアウトをつくるのか、アニメーションで分かりやすく解説 -How Flexbox works
Post on:2017年2月6日
sponsors
Flexboxの基本原則は、CSSでのレイアウトを柔軟かつ直観的にすることです。
Flexboxでどのようにレイアウトをつくるのか、Flexboxで最もよく使う5つのプロパティがどのように機能するのかをアニメーションで紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
- Flexboxの基本「display: flex;」
- flexコンテナの主軸の方向「flex-direction」
- flexコンテナの主軸に沿って配置「justify-content」
- flexコンテナの交差軸に沿って配置「align-items」
- flexアイテムの整列「align-self」
- 最後に
Flexboxの基本「display: flex;」
まずは、div要素を配置した例を見てください。
「display: block;」の実装例
グレーのコンテナの中に、サイズが異なる4色のdiv要素があります。div要素はデフォルトで「display: block;」を備えているので、4色のdiv要素はその行の全幅を占めます。
Flexboxを使うにはコンテナをflexコンテナにします。
コードは非常に簡単です。
|
1 2 3 |
#container { display: flex; } |
「display: flex;」を記述するとflexコンテナになる
HTMLは一切変更していません。
Flexboxを使うために、「block」を「flex」に変えただけです。これだけでdiv要素はインラインで表示されるようになりました。
Flexboxを使うと、従来のCSSでは難しかった実装でも簡単に配置できるようになります。その便利なFlexboxで最もよく使う5つのプロパティの使い方を確認してみましょう。
補足
- CSS3 Flexbox の各プロパティの使い方を詳しく解説 -flexboxの使い方
flexコンテナの主軸の方向「flex-direction」
Flexboxのコンテナには、主軸（Main）と交差軸（Cross）の2つの軸があります。デフォルトでは次のようになります。
flexコンテナの主軸と交差軸
デフォルトでは、アイテムは主軸に沿って左から右に配置されます。そのため「display: flex;」を適用すると、アイテムがデフォルトで水平に配置されます。
「flex-direction」を使用すると、この主軸を回転させることができます。
|
1 2 3 4 |
#container { display: flex; flex-direction: column; } |
「flex-direction」で主軸を回転
ここで重要なポイントがあります、「flex-direction: column;」はアイテムを交差軸に揃えません。主軸自身を水平から垂直に変更します。
「flex-direction」には、行逆方向と列逆方向の2つのオプションがあります。
「flex-direction」のオプション
補足
- CSS3 Flexbox の各プロパティの使い方を詳しく解説 -flexboxコンテナ: flex-direction
flexコンテナの主軸に沿って配置「justify-content」
「justify-content」は、主軸に沿ってアイテムをどのように整列させるかを制御します。
ここで主軸と交差軸の区別をさらに深めます。まずは「flex-direction: row;」で見てみましょう。
|
1 2 3 4 5 |
#container { display: flex; flex-direction: row; justify-content: flex-start; } |
「justify-content」には、5つの値が指定できます。
- flex-start
- flex-end
- center
- space-between
- space-around
それぞれの値の違いを見てましょう。
「justify-content」の5つの値
「space-between」と「space-around」の違いは分かりにくいかもしれません。「space-between」は各アイテムの間に等しいスペースを与えますが、最初と最後の両端にスペースはありません。
「space-around」はアイテムの両端に同じスペースを配置し、各アイテムの間に等しいスペースを与えます（各アイテム間のスペースは両端の倍）。
注意点: 「justify-content」は主軸に沿って機能し、「flex-direction」は主軸を替えます。これらは変更させるときに重要です。
補足
- CSS3 Flexbox の各プロパティの使い方を詳しく解説 -flexboxコンテナ: justify-content
flexコンテナの交差軸に沿って配置「align-items」
「justify-content」を理解していると、「align-items」は簡単です。
「justify-content」は主軸（Main）に沿って機能しましたが、「align-items」は交差軸（Cross）に沿って機能します。
flexコンテナの主軸と交差軸
「flex-direction」の横行をリセットして、軸が上記の画像と同じに見えるようにしましょう。
「flex-direction」には、5つの値が指定できます。
- flex-start
- flex-end
- center
- stretch
- baseline
最初の3つは「justify-content」とまったく同じです。しかし最後の2つは少し異なっています。
「stretch」はアイテムをコンテナいっぱいに配置し、「beseline」はベースラインに沿って配置されます。
「align-items」の5つの値
「align-items： stretch;」は、アイテムの高さをautoにしなければならないことに注意してください。auto以外を指定すると、heightプロパティはstretchを優先します。
「align-items： baseline;」は、pタグを取り去ると、アイテムの下端を整列させます。
pタグ無しの「align-items： baseline;」の実装例
主軸と交差軸をより説明するために、「justify-content」と「align-items」のセンタリングが「flex-direction」の「row」と「column」でどのように異なるかを見てみましょう。
「flex-direction」の「row」と「column」の比較
「row」ではアイテムは水平の主軸に沿って配置され、「column」では垂直の主軸に沿って配置されます。どちらの場合もアイテムが縦と横の両方にセンタリングされていますが、2つには互換性がありません。
補足
- CSS3 Flexbox の各プロパティの使い方を詳しく解説 - flexboxコンテナ: align-items
flexアイテムの整列「align-self」
「align-self」はアイテムの整列を指定するもので、「align-items」での指定より優先します。
すべてのプロパティは「align-items」と同じですが、デフォルトはautoで、コンテナのalign-itemsを継承します。
|
1 2 3 4 5 6 7 |
#container { align-items: flex-start; } .square#one { align-self: center; } // Only this square will be centered. |
これがどのように見えるか見てみましょう。
2つのアイテムに「align-self」を適用し、残りは「align-items: center;」と「flex-direction: row;」を適用します。
「align-self」の実装例
補足
- CSS3 Flexbox の各プロパティの使い方を詳しく解説 -flexboxアイテム: align-self
最後に
Flexboxの使い方を簡単に解説しましたが、これらのプロパティは基本的ながら、コンテンツを整列させるために重要です。
Flexboxの更に詳しい解説は、下記ページを参考にしてください。
sponsors
