サイトのレイアウトにおいて最近はFlexboxを採用するケースがほとんどなのではないでしょうか。とは言っても完璧に理解しているという方はどれくらいいるのでしょうか。様々なバリエーションがあり便利なFlexboxを今回はじっくりとまとめていきます。
数がとても多いので全2回に分けてまとめていきたいと思います。まず今回はFlexboxレイアウトについての基本的な知識と、親要素のFlexコンテナーに指定するプロパティになります。
基本：Flexboxを構成する要素について
まずは基本的なことになりますが、FlexboxはFlexコンテナーという親要素とFlexアイテムという子要素で構成されています。つまり下記のようなFlexコンテナーとFlexアイテムの親子関係が成り立ちます。
<div class="flex-container>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
この親要素である「.flex-container」に対して「display: flex;」を指定することで、Flexboxレイアウトが適用され、子要素の「.flex-item」が横に並びフレキシブルに対応することが可能になります。SafariやiOS用に「-webkit-」のベンダープレフィックスをつけておきます。基本的にはブロックレベル要素として扱うことが多いですが、インライン要素に適用させたい場合は「display: inline-flex;」を指定させます。
.flex-container {
display: flex;
display: -webkit-flex;
}
// Flexコンテナーをインライン要素としたい場合
.flex-container {
display: inline-flex;
display: -webkit-inline-flex;
}
これで要素をFlexboxレイアウトとして扱えるようになりました。ただこれだけだと横に並んだだけになります。以下で説明する様々なプロパティでいろんな指定を行うことができるのがFlexbox最大の強みです。
実践：親要素の「Flexコンテナー」の振る舞いを指定する
まずは親要素である「Flexコンテナー」に対して様々な指定を行ってきたいと思います。
1. 親要素内の並びと配置方向を指定する「flex-direction」
親要素に含まれる子要素がどのような順番で並びどの場所から配置されるかと指定できます。（プレフィックスを付ける場合は「-webkit-flex-direction」となります）
| row |
左端から右端へと行内へ水平に子要素が並んで配置されます。 |
| row-reverse |
右端から左端へと行内へ水平に子要素が並んで配置されます。 |
| column |
上端から下端へと列内へ垂直に子要素が並んで配置されます。 |
| column-reverse |
下端から上端へと列内へ垂直に子要素が並んで配置されます。 |
2. 親要素内の並びの折り返しを指定する「flex-wrap」
子要素の配置折り返しを指定できます。子要素を横一行に収めたいか、幅を保持して折り返したいかで使い分けます。（プレフィックスを付ける場合は「-webkit-flex-wrap」となります）
| nowrap |
子要素は折り返しされず必ず一つの横行内に収まります。 |
| wrap |
子要素は行内のサイズを超えると折り返され複数行に渡って配置されます。 |
| wrap-reverse |
子要素は行内のサイズを超えると折り返され複数行に渡って配置された上で、下段行から並び変わります。 |
3. 親要素内の水平方向への整列を指定する「justify-content」
子要素を水平方向に揃えたい場合に指定します。flex-directionがcolumnなどの場合は垂直方向になり-reverseの指定がついているとflex-startとflex-endが逆になります。（プレフィックスを付ける場合は「-webkit-justify-content」となります）
| flex-start |
親要素の左端に寄せて子要素が配置されます。 |
| center |
親要素の水平方向中央に寄せて子要素が配置されます。 |
| flex-end |
親要素の右端に寄せて子要素が配置されます。 |
| space-between |
親要素の左右両端に子要素を揃えた上で、等間隔に配置されます。 |
| space-around |
親要素内で子要素が全て同じ間隔で配置されます。 |
4. 親要素内で単一行での垂直方向への整列を指定する「align-items」
子要素を垂直方向に揃えたい場合に指定します。単一行が対象となるのでflex-wrapでnowrapを指定する必要があります。（プレフィックスを付ける場合は「-webkit-align-items」となります）
| stretch |
親要素の高さにあわせて子要素の高さが引き延ばされるように配置されます。 |
| flex-start |
親要素の上端に寄せて子要素が配置されます。 |
| center |
親要素の垂直方向中央に寄せて子要素が配置されます。 |
| flex-end |
親要素の下端に寄せて子要素が配置されます。 |
| baseline |
親要素のベースラインに合わせて子要素が配置されます。 |
5. 親要素内で複数行での垂直方向への整列を指定する「align-content」
複数行にわたる子要素を垂直方向に揃えたい場合に指定します。複数行が対象となるのでflex-wrapでwrapを指定する必要があります。（プレフィックスを付ける場合は「-webkit-align-content」となります）
| stretch |
親要素の高さを占めるように均等に広がって配置されます。
余白がある場合は均等にそれぞれの子要素の後ろにつきます。 |
| flex-start |
親要素の上端に集められて子要素が配置されます。 |
| center |
親要素の垂直方向中央に集められて子要素が配置されます。 |
| flex-end |
親要素の下端に集められて子要素が配置されます。 |
| space-between |
親要素の上端と下端に揃えられて、残りの行が等間隔に配置されます。 |
| space-around |
親要素内でそれぞれの行が等間隔に配置されます。 |
おまけ：親要素の「Flexコンテナー」で使えるショートハンド
「flex-direction」と「flex-wrap」をまとめて指定できる「flex-flow」
親要素内の並びと配置、そして折り返し有無の指定をまとめてできます。flex-directionからflex-wrapの順に指定します。
.flex-container {
flex-flow: row-reverse nowrap;
-webkit-flex-flow: row-reverse nowrap;
}
いかがでしょうか、今回はFlexboxレイアウトにおける親要素のFlexコンテナーに指定するプロパティをまとめました。引き続き次回記事「CSSのFlexboxレイアウトをマスターするためのまとめ（Flexアイテム編）」で親要素のFlexアイテムに指定するプロパティをまとめていきたいと思います。今回の
サンプルはこちらにまとめていますのでご参考に！
categories