CSSフレックスボックスの使い方を初心者向けに解説！縦・横並び/間隔/幅の指定方法。
この記事では、CSSのフレックスボックス（Flexbox）について基本的な使用方法を初心者向けに、また目的ごとに解説したい。
フレックスボックスはその使い勝手の良さから既にCSSレイアウトの標準となりつつあるレイアウトモード。
その仕組みは決して難しいものでは無いが、基本的なルールやプロパティの使い方を知っておかないとハマりやすいポイントでもある。
今回はそんなフレックスボックスを目的別に分かりやすく解説していきたい！
フレックスボックス（Flexbox）とは？
まずはフレックスボックスの概要を説明しておきたい。
CSSレイアウトの基本
現在ではCSSを使ったレイアウト作成には大きく分けて3つの手法がある。
- 従来のCSSレイアウト
positionやfloatといったプロパティを使用して画面の構成を指定していく方法。ウェブの誕生以来長く使われてきたが、使いこなすには慣れが必要。 - フレックスレイアウト
CSS3より導入されたフレキシブルで直感的なレイアウト方法。コンテナ内にアイテムを配置してレイアウトをおこなう。 - グリッドレイアウト
縦軸と横軸からなるグリッドと呼ばれるマップにアイテムを配置するレイアウト方法。UIデザインの世界では昔からある手法で理解しやすいが、変更に弱いのが弱点だった。CSSのグリッドレイアウトではそのような変更の際の煩わしさもうまく解消されている。
実践では複数のレイアウト手法を組み合わせてデザインをおこなっていくが、大まかな方針は実装に入る前の打ち合わせで決めておきたい。
フレックスボックスとは？
フレックスボックスはグリッドレイアウトと共にCSS3より導入されたCSSにおける新しいデザインレイアウトの指定方法。
従来のpositionやfloatなどを使用した画面配置よりもフレキシブルに、そして直感的にレイアウトをデザインすることができる。
フレックスボックスは複数のアイテム（要素）とそれを格納するコンテナから構成される。フレックスボックスのアイテムにあたる要素をコンテナとして使用する（入れ子構造）ことも可能。
フレックスボックスのサンプル（編集可能）
この記事で使用するフレックスボックスのサンプルを貼り付けておくので、色々な設定を試してみてほしい。
See the Pen CSS Flexbox example by Yoshiki Kuno (@yoshiki449) on CodePen.
サンプルのHTML・CSSコードは以下の通り。
<div class="container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
</div>.container {
width: 800px;
height: 400px;
margin: 30px auto;
border: solid 5px lightgreen;
display: flex;
}
.container > * {
color: white;
font-size: 28px;
font-weight: 800;
padding: 30px;
}
.item-1 { background-color: orange; }
.item-2 { background-color: lightblue; }
.item-3 { background-color: violet; }
.item-4 { background-color: blue; }
.item-5 { background-color: red; }フレックスボックスの使い方
ではフレックスボックスの使い方を確認しよう。
フレックスボックスを使用する
フレックスボックスはコンテナとアイテムから構成される。
displayプロパティをflexに指定すると、その要素がフレックスボックスのコンテナとなる。
.container {
display: flex;
}アイテムの方向（横並びと縦並び）
フレックスボックスでは横並び/縦並びのいずれかを指定してデザインを指定していく。
アイテムの並ぶ方向はflex-directionプロパティで指定することができる。
アイテムを横並びにする
プロパティを「row」に設定した、もしくはflex-directionを指定しない場合はアイテムは横並びとなる。
この場合はX軸をメイン軸、Y軸をサブ軸として捉える。
アイテムを縦並びにする
flow-directionをcolumnに設定するとアイテムが上から下の方向へと並び変わる。
この場合においてはY軸がメイン軸、X軸がサブ軸となる。
アイテムの順番
アイテムは通常html内で要素の順番通りに左から右、もしくは上から下へと配置される。
アイテムの順番を逆にする
アイテムを逆の順番で配置したい場合はflex-directionをrow-reverseかcolumn-reverseに設定する。
アイテムの順番をそれぞれ指定する
アイテムの順番を指定したい場合はアイテムに対してorderプロパティを使用する。
orderプロパティでは整数の値を使用して、数値が小さい順にアイテムが並び替わる。値を指定しない場合は0となる。
例として以下のようにorderを指定した場合は以下のように写真のようにアイテムが並び替わる。
.item-1 { order: -1; }
.item-2 { order: 8; }
.item-3 { order: 5; }
.item-4 { order: -5; }
アイテムの配置と間隔
次にコンテナ内でのアイテムの配置を調整してみよう。
前項で説明したようにフレックスボックスではflex-dirctionで横並び（row）か縦並び（column）を指定しているかによって、メイン軸・サブ軸が入れ替わる。
メイン軸の配置はjustify-contentプロパティにて、サブ軸の配置はalign-itemsによって指定する。
アイテムを左寄せにする
アイテムを左寄せにする場合はjustify-contentをflex-startに指定する。
なお、flex-directionがcolumnの場合はメイン軸の方向が変わるのでアイテムは上寄せとなる。
アイテムを右寄せにする
アイテムを右寄せにする場合はjustify-contentをflex-endに指定する。flex-directionがcolumnの場合はアイテムは下寄せとなる。
アイテムを中央揃えにする
アイテムを中央で揃えたい場合はjustify-contentをcenterに指定する。
アイテムを等間隔に配置する
アイテムをコンテナ内で等間隔に配置したい場合はjustify-contentをspace-betweenにする。
アイテムの左右の余白を等しくする
アイテムの左右の余白を等しく配置したい場合はjustify-contentをspace-aroundにする。
アイテムとアイテムの間を埋める（スペーサー）
ウェブサイトのヘッダー部分などにおいて、アイテムとアイテムの間を埋めるようにスペースを空けたいといったパターンもよくある。
その場合はスペースを挟むアイテムにmargin-rightかmargin-leftにautoを指定する。
サブ軸方向の配置を変える
アイテムの縦軸方向（flex-direction: columnの場合は横軸方向）の配置はalign-itemsで指定する。
align-itemsで使用できる値はjustify-contentと同様だ。
アイテムのサブ軸方向の配置を個別に変更したい場合はalign-selfプロパティをアイテムに使用する。
上の例では、コンテナにalign-items: flex-endを全体の配置を指定したうえで、アイテム3にalign-self: centerを、アイテム4にalign-self: stretchを指定している。
アイテムの伸縮
次にアイテムの幅や高さを指定するプロパティについて見ていきたい。
アイテムのベースサイズを指定する
コンテナのサイズに余裕がある場合に適応されるアイテムの幅を指定するにはflex-basisを使用する。
flex-basisにはpx・em・％といった単位を使用することができる。
上の例ではアイテム1のflex-basisを160pxにアイテム2のflex-basisを10remに指定している。
アイテムを伸長する
空白を埋めるようにアイテムを伸長したい場合はflex-growプロパティを使用する。
flex-growを指定したアイテムがコンテナの余白を分割するように伸長する。flex-growは正数で指定する。
上の例ではアイテム1のflex-growを1にアイテム2を3で指定している。
アイテムを縮小する
アイテムの合計幅がコンテナの幅が小さいときに特定のアイテムを縮小したいことがあるだろう。
そういった時はflex-shrinkで縮小率を指定する。flex-growと同様に指定は正数でおこなう。
（例）flex: 1 0 200px;
複数行の配置
ひとつのフレックスボックスに複数の行にまたがるアイテムを配置することもできる。
アイテムを複数行に配置したい場合はflex-wrapプロパティをwrapに指定する。
