Flexboxとは？

「Flexbox（Flexible Box Layout Module）」は、CSS3 から導入された新しいレイアウト方法で、ボックスの横並びや上下左右の揃えなどを簡単かつ柔軟にレイアウトをコントロールすることができるようになっています。使いこなせると非常に便利なFlexboxなので、使い方をしっかりとり貸しておきましょう。

Flexboxを使ったレイアウトは、「flexアイテム」と呼ばれる複数の子要素を持つ「flexコンテナ」という親要素とで構成されています。

具体的には、ボックスの表示のしかたをコントロールするdisplayプロパティの値を「flex」に指定することでその要素をflexコンテナとして扱えるようになります。flexコンテナの直下の子要素は自動的にfrexアイテムになり、それらのfrexアイテムのレイアウトを様々に変更することができるようになります。

flexコンテナやfrexアイテムにはそのレイアウトをコントロールするための様々なプロパティが用意されています。

Flexboxの基本的な使い方

Flexboxを使うために、flexコンテナになる親要素の中に、flexアイテムとなる子要素を入れてマークアップします。以下の例では親要素である「container」というクラス名のついた div要素の中に、子要素である「item」というクラス名のついた div要素が入っています。

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

親要素であるdiv要素のdisplayプロパティの値はblockになっているので、子要素は通常の表示フローに従って縦に並んで表示されます。

Flexboxを指定する

Flexboxにするには親要素のdisplayプロパティの値をflex（親要素をインライン要素として表示したい場合には値をinline-flexに指定します。）に指定するだけで、親要素はflexコンテナ、子要素はflexアイテムになります。

この例では「.container」がflexコンテナになり、「.item」がflexアイテムになります。

.container {
    display: flex;
}

Flexbox関連するの様々なプロパティの規定値の設定によって、flexアイテムである子要素が横に並んで表示されるようになります。

Flexboxの概念

Flexboxには軸や方向という概念があます。軸には主軸と交差軸があり方向（始端と終端）を持ちます。この軸と方向によって要素の並びを変更し、その揃いや大きさをコントロールしていきます。

Flexのプロパティの規定値では、左を始端とする水平方向が主軸、上を始端とする垂直方向が交差軸になっています。これによりFlexboxの初期状態ではflexアイテムは主軸に従って左から右に並べらます。

Flexコンテナに指定できるプロパティ

親要素であるfexコンテナに指定することのできるプロパティを見ていきましょう。これらのプロパティは、flexアイテムの並ぶ軸方向や整列の仕方を指定するためのものです。

flex-directionプロパティ

flex-directionプロパティは、flexアイテムの並ぶ方向を設定するプロパティで、主軸と交差軸（水平と垂直）の切り替えと軸方向をかえます。つまりこれは、Flexアイテムを横並びにするか、縦並びにするかを指定することになります。指定できる値は以下の4つです。

値：row（規定値）

主軸は水平方向で、flexアイテムは左を始端に右方向の横並びに配置されます。

.container {
    display: flex;
    flex-direction: row; /* 指定しない場合の規定値 */
}

値：row-reverse

主軸は水平方向で、rowとは方向が逆になり、flexアイテムは右を始端に左方向の横並びに配置されます。

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

値：column

主軸は垂直方向になり、flexアイテムは上を始端に下方向の縦並びに配置されます。

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

値：column-reverse

主軸は垂直方向で、columnとは方向が逆になり、flexアイテムは下を始端に上方向の縦並びに配置されます。

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

flex-wrapプロパティ

flex-wrapプロパティは、flexアイテムの折り返しとその方向を決めるプロパティです。折り返しを指定すると、子要素が親要素の幅を超えてしまった場合、折り返して複数行に配置されていきます。指定できる値は以下の3つです。

値：nowrap（規定値）

子要素を折り返しせず、flexアイテムを全て一行に収めようとします。flexコンテナの大きさより、flex アイテムの大きさの合計が超える場合でも一行に収めようとするため、flexアイテムの大きさは縮小されてしまったり、親のボックスの幅を越えてしまったりします。

.container {
    display: flex;
    flex-wrap: nowrap; /* 指定しない場合の規定値 */
}

値：wrap

flexコンテナにflexアイテムが収まらない場合、flexアイテムは折り返され複数行になります。折り返しは主軸に沿って上から下へ折り返されます。

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

値：wrap-reverse

flexコンテナにflexアイテムが収まらない場合、flexアイテムは折り返され複数行なります。折り返しは主軸に沿って下から上へ折り返されます。

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

値：flex-start（規定値）

flexアイテムは主軸方向の始端に寄せて配置されます。 軸方向と始端はflex-directionプロパティによって決定されます。flex-directionプロパティの値がrowの場合は左に寄せて配置されることになります。

.container {
    display: flex;
    justify-content: flex-start; /* 指定しない場合の規定値 */
}

値：flex-end

flexアイテムは主軸方向の終端に寄せて配置されます。 軸方向と終端はflex-directionプロパティによって決定されます。flex-directionプロパティの値がrowの場合は右に寄せて配置されることになります。

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

値：center

flexアイテムは主軸方向に沿って、つまり左右の中央に寄せて配置されます。

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

値：space-around

flexコンテナの余った部分が、flexアイテムの間に均等に割り振られ主軸方向（水平）に沿って配置されます。各flexアイテムに均等に割り振られるので、両端の余白はflexアイテム間の余白の半分になります。

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

値：space-between

最初のflexアイテムを始端に、最後のflexアイテムを終端に配置し、flexコンテナの余った部分が、flexアイテムの間に均等に割り振られ主軸方向（水平）に沿って配置されます。

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

align-itemsプロパティ

align-itemsプロパティは、 flex アイテムの交差軸方向の揃えを指定するプロパティです。flex アイテムを交差軸に沿ってどの位置に整列するかを指定することができます。指定できる値は以下の5つです。

値：stretch（規定値）

flexアイテムに高さが指定されていない場合、 flexアイテムはflexコンテナの高さいっぱいに広がるか、または一番高いflexアイテムの高さにあわせて広がります。stretch が有効なのはflex アイテムに高さが指定されていない場合のみになります。

.container {
    display: flex;
    align-items: stretch; /* 指定しない場合の規定値 */
}

値：flex-start

flexアイテムはflexコンテナの交差軸の始端に揃えて配置されます。flex-directionプロパティの値がrowの場合は上揃えに配置されることになります。

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

値：flex-end

flexアイテムはflexコンテナの交差軸の終端に揃えて配置されます。flex-directionプロパティの値がrowの場合は下揃えに配置されることになります。

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

値：center

flexアイテムはflexコンテナの交差軸の中央に揃えて配置されます。flex-directionプロパティの値がrowの場合は上下中央に揃えて配置されることになります。

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

値：baseline

flexアイテムはflexコンテナの交差軸に沿ってflexアイテムのベースラインを揃えて配置されます。

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

align-contentプロパティ

align-contentプロパティは、flexアイテムが複数行に渡った場合の交差軸方向の揃えを指定するプロパティです。折り返した flexアイテムの交差軸方向のどの位置に整列するかを指定します。flex-wrapの値にnowrapが指定されていると子要素が一行になるので、align-contentは無効になります。

justify-contentは主軸に対してflexアイテムの整列位置を指定するもので、それに対してalign-contentプロパティではそれが交差軸に対して指定されるものとなります。flex-directionプロパティの値がrowあるいはrow-reverseの場合は垂直方向、columnあるいはcolumn-reverseの場合は水平方向の整列を指定することになります。

値：stretch（規定値）

高さの指定されていないflexアイテムがflexコンテナの高さいっぱいに広がります。

.container {
    display: flex;
    flex-wrap: wrap; /* この指定がないとalign-contentは無効 */
    align-content: stretch;
}

値：flex-start

flexアイテムはflexコンテナの交差軸の始端に揃えて配置されます。

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 指定しない場合の規定値 */
    align-content: flex-start;
}

値：flex-end

flexアイテムはflexコンテナの交差軸の終端に揃えて配置されます。

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 指定しない場合の規定値 */
    align-content: flex-end;
}

値：center

flexアイテムはflexコンテナの交差軸に沿って中央に揃えて配置されます。

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 指定しない場合の規定値 */
    align-content: center;
}

値：space-around

flexコンテナの余った部分が、flexアイテムの間に均等に割り振られ交差軸方向に沿って配置されます。各flexアイテムに均等に割り振られるので、flexアイテム間の余白は両端の余白の2倍になります。

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 指定しない場合の規定値 */
    align-content: space-around;
}

値：space-between

最初の Flex アイテムを始端に、最後の Flex アイテムを終端に配置し、flexコンテナの余った部分が、flexアイテムの間に均等に割り振られ交差軸方向に沿って配置されます。

.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; /* 指定しない場合の規定値 */
    align-content: space-between;
}

Flexアイテムに指定できるプロパティ

Flexコンテナの中にある子要素「Flexアイテム」に指定するプロパティです。親要素に「display: flex」が指定されていないと有効にならないので注意しましょう。Flexアイテムには以下のプロパティが使用できます。

orderプロパティ

orderプロパティは、flexアイテムの並び順を指定するプロパティです。通常子要素はHTMLの記述順に配置されますが、orderプロパティでflexアイテムの順番を並べ替えることができます。 整数値のみを指定できます。初期値は「0」です。マイナス値を指定することもできます。

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>

.item1 {
    order: 2;
}
.item2 {
    order: 3;
}
.item3 {
    order: 1;
}

flex-growプロパティ

flex-growプロパティは、Flexコンテナの主軸方向に余白がある場合の、その余白のスペースをどのように分配してFlexアイテムを引き延ばすかを決めるプロパティです。値には値は単位のない数値（例: 1, 2, 0.5）のみを指定します。値が大きいほど伸び率は大きくなります。規定値は0で、余白があっても引き延ばされません。

flex-growプロパティ は伸縮比率を指定するもので、Flexアイテムに指定された flex-growプロパティ の値に基づき、余ったスペースが比例配分にしたがって分配され、アイテムのサイズを引き延ばします。

.item1 {
    flex-grow: 0;
}
.item2 {
    flex-grow: 1;
}
.item3 {
    flex-grow: 2;
}

flex-shrinkプロパティ

flex-shrinkプロパティは、flex-growプロパティと逆に、すべてのflexアイテムがflexコンテナの幅に入りきらない場合に、指定のflexアイテムが他のアイテムに対してどれくらい縮むかを指定します。

規定値は1で、負の値は無効になります。0を指定した場合は縮まずにオリジナルサイズを維持します。値が大きいほど幅が狭くなります。

次の例では、flexアイテムはwidthプロパティに50%が指定されており、３つのアイテムはコンテナの幅を超える指定にしています。各アイテムの縮む比率を指定してコンテナ内に収まるようにしています。

.item1 {
    flex-shrink: 0;
}
.item2 {
    flex-shrink: 1;
}
.item3 {
    flex-shrink: 2;
}

flex-basisプロパティ

flex-basisプロパティは、Flexアイテムの主軸方向の初期サイズを指定するためのプロパティです。例えば主軸が水平方向の場合（flex-direction: rowの場合）にはwidthプロパティと、主軸が垂直方向の場合（flex-direction: columnの場合）にはheightプロパティと同じように意味合いになります。しかし、flex-basisプロパティに指定した値はwidth・heightプロパティよりも優先されます。autoと指定した場合はFlexアイテムのコンテンツのサイズが適応されます。

.item1 {
    flex-basis: auto;
}
.item2 {
    flex-basis: 40%;
}
.item3 {
    flex-basis: 20%;
}

flex-basisプロパティとflex-growプロパティの関係ですが、まずflex-basisプロパティでFlexアイテムの初期サイズを決定し、その後に残りのスペースを flex-growプロパティに従って埋めようとします。

align-selfプロパティ

align-selfプロパティは、親要素に空きスペースがあった場合、Flexアイテムの交差軸方向の揃えをどの位置に配置するかを指定します。親要素（Flexコンテナ）に指定する align-itemsプロパティと全く同じ機能ですが、こちらはFlexアイテムに対して個別に指定するプロパティです。 align-self プロパティでの指定は、親要素のalign-itemsプロパティよりも優先されます。

align-self プロパティには次の値が指定できます。

.item1 {
    align-self: auto;
}
.item2 {
    align-self: stretch;
}
.item3 {
    align-self: flex-start;
}
.item4 {
    align-self: flex-end;
}
.item5 {
    align-self: center;
}
.item6 {
    align-self: baseline;
}
.item7 {
    height: 200px;
}