シリーズ第19回は、CSSのフレックスボックス（flexbox）についてです。これを覚えると思い通りにレイアウトができるようになります。ただ奥深い概念なので、この記事では基本的なことを3分で解説します。
これまで、レイアウトの際にfloatプロパティを使ってきたかもしれません。こちらも概念が難しく記述も長くなる傾向があるため、今はあまり使われていません。これからならflexboxを覚えればOKです。
フレックスボックスの基本概念
簡単に言えば、1つの箱（container）の中にアイテムを上手に配置するために考え出されたものです。
MDNのリファレンスで「フレックスボックスの基本概念」を確認してみると、何やら難しい表現でいろいろ説明されています。ただ、これはプログラミング初心者にとってかなり難解です。やる気をもっていかれ挫折しないためにも、まずは基本的な概念を分かりやすく解説したいと思います。
display: flex;と組み合わせて使う
CSSで一つのコンテナに対してdisplay: flex;を記述するだけでもいくらかの意味がありますが、これに基本的なプロパティを組み合わせることにより、アイテムを上手に配置していくことができます。この記事で考えるのは、以下の3つのプロパティだけです。
- flex-direction（主軸）
- justify-content（主軸での配置）
- align-items（交差軸での配置）
1つ1つ挙動を確認しながら見ていきましょう。
flex-direction（主軸）
フレックスボックスは2つの軸という観点で考えます。主軸と交差軸の2つです。主軸はデフォルトで横（水平）軸、交差軸は主軸に直角に交差する縦（垂直）軸になります。
この軸を定義するのがflex-directionプロパティです。このプロパティに記述する値として、以下のものがあります。
- row
- row-reverse
- column
- column-reverse
それぞれを記述した時の挙動を確認します。
まず以下のようなHTMLとCSSを準備しました。
HTML：
CSS：
containerと各boxに対してスタイルがあたっています。この状態でブラウザに表示すると次の画像のようになります。
では、container全体に指定されているdisplay: flex;に、flex-directionを組み合わせて挙動を確認していきます。
flex-direction: row;
開発者ツールで確認すると分かりやすいと思います。CSSでflex-direction: row;が指定されています。デフォルトで主軸は横（水平）になっています。それで、横を意味するrowを指定しても変化はありません。container内の３つのboxは横方向へ左から順に並んでいます。
これをリバースするとどうなるでしょうか。
flex-direction: row-reverse;
主軸である横方向が逆側（右）から配置され、さらにbox1～box3の順番も右から左になっているのが分かります。このような挙動で主軸がリバースします。軸が右上にきたイメージですね。
次はcolumn（縦方向）です。
flex-direction: column;
flex-direction: column;の記述により、今度は主軸が縦方向になりました。上（垂直）方向から下へboxが並んでいます。
columnをリバースするとどうなるでしょうか。
flex-direction: column-reverse;
主軸が縦方向で下から上の配置になることに加えて、box1～box3の順番も下から上になっています。軸が左下にきたイメージですね。
主軸を定義するflex-directionの挙動を確認してきました。では、次は主軸での配置を指定するjustify-contentプロパティについてです。
justify-content（主軸での配置）
分かりやすくするために、先程解説したflex-direction（主軸）はデフォルトのまま（横方向）で考えたいと思います。
justify-contentに記述する値として、以下のものがあります。
- flex-start
- flex-end
- center
- space-around
- space-between
最初に準備したHTMLとCSSを使います。containerに対してdisplay: flex;とjustify-contentを組み合わせた時の挙動です。
justify-content:flex-start;
justify-content:flex-end;
justify-content:center;
justify-content:space-around;
justify-content:space-between;
これはどれも分かりやすかったと思います。主軸（横）に対しての配置を指定しています。
space-around;とspace-between;は少し間違いやすいかもしれません。aroundのほうは、ボックスの周り（around）に同じだけの空白（space）があります。それに対してbetweenはボックスとボックスの間（between）だけに同じ空白（space）があるイメージですね。
次は、交差軸での配置を指定するalign-itemsプロパティについてです。
align-items（交差軸での配置）
こちらも分かりやすくするために、flex-direction（主軸）はデフォルトのまま（横方向）で考えます。つまりalign-itemsで縦（交差軸）方向の配置を指定します。これにより、アイテム間の位置、端揃え、スペース配分ができます。
align-itemsに記述する主な値として、以下のものがあります。
- flex-start
- flex-end
- center
こちらも難しくありません。もうすでに挙動を想像できるのではないでしょうか。
align-items:flex-start;
align-items:flex-end;
align-items:center;
このように縦方向の配置を指定できます。
まとめ
初心者もできる！プログラミング基礎講座【第19回】はいかがでしたか。今回は、フレックスボックスについて解説してきました。基本的な主軸の概念と主軸や交差軸での配置について理解できたでしょうか。
基本的には、以下の3つのプロパティを覚えればOKです。
- flex-direction（主軸）
- justify-content（主軸での配置）
- align-items（交差軸での配置）
これらのプロパティをさらに組み合わせて使っていくと、思い通りのレイアウトを組めるようになります。次回はこの点を取り上げます。また、主軸がリバースされている場合の挙動について確認しながら解説したいと思います。
では、次回もお楽しみに！