【CSS】Flexboxの使い方｜縦横の配置・横幅サイズ・折返しなどを指定する方法
CSSでレイアウトを作成する場合、Flexbox（フレックスボックス）と呼ばれている Flexible Box Moduleを利用する方法があります。
Flexboxは、主にボックス内の要素を１行で構成したい場合に利用し、柔軟・簡単にボックス内のレイアウトを作成できます。
今回は、そのFlexboxの利用方法についての簡単なまとめとなます。
Flexbox（フレックスボックス）について
Flexboxは、フレックスコンテナの要素と、その直下の子要素のフレックスアイテムで構成され、Flexboxの配置・サイズ・折返し・順番を設定することで、柔軟・簡単にレイアウトを作成できます。
Flexboxを利用する方法
Flexboxを利用するには、親と子からなるボックスの親要素に対して以下のいずれかのプロパティを指定します。
- display : flex ;（ブロックレベル要素のフレックスコンテナを作成する場合）
- display : inline-flex ;（インラインレベル要素のフレックスコンテナを作成する場合）
そのことにより、親要素がフレックスコンテナとなり、その直下の子要素がフレックスアイテムとなります。
そして、フレックスコンテナ内のレイアウトやサイズの設定には、以下のプロパティなどを利用します。
フレックスコンテナ内のレイアウトを設定
フレックスコンテナ内のレイアウトを設定するには、フレックスコンテナの要素に次のプロパティを指定します。
横方向（主軸）に対する配置を指定｜justify-content
主軸に対してフレックスアイテムの配置を指定するには、フレックスコンテナにjustify-contentプロパティを指定します。
また、主軸はデフォルトでは横方向となります。
justify-contentの値
justify-contentプロパティには次の値などがあります。
- flex-start（先頭に配置。デフォルト値）
- flex-end（後尾に配置）
- center（センター揃え）
- space-between（アイテムの間のスペースを均等割）
- space-around（アイテムの両端のスペースを均等割）
以下、justify-contentプロパティの例となります。
See the Pen justify-content by yic666kr (@yic666kr) on CodePen.
justify-contentプロパティのその他の値については文末の参考サイトなどを確認してみてください。
縦方向（交差軸）に対する配置を指定｜align-items
交差軸に対してフレックスアイテムの配置を指定するには、フレックスコンテナにalign-itemsプロパティを指定します。
また、交差軸はデフォルトでは縦方向となります。
align-itemsプロパティの値
align-itemsプロパティには次の値などがあります。
- flex-start（先頭に配置）
- flex-end（後尾に配置）
- center（センター揃え）
- stretch（親要素と同じサイズに伸縮）
- normal（フレックスアイテムの場合stretchと同じ 。デフォルト値）
以下、align-itemsプロパティの例となります。
See the Pen Flexbox align-item by yic666kr (@yic666kr) on CodePen.
align-itemsプロパティのその他の値については文末の参考サイトなどを確認してみてください。
justify-content・align-itemsについて
上記で利用したjustify-content・align-itemsプロパティは、CSSボックス配置モジュールのプロパティとなりFlexbox以外でも利用できます。
CSSボックス配置モジュールのプロパティでは、ボックスレイアウトの配置に関する指定ができ、今回利用したプロパティ以外にも、さまざまなプロパティがあります。
詳しくは、以下のリンク先を参考にしてみてください。
CSS ボックス配置 - CSS: カスケーディングスタイルシート | MDN
「主軸・交差軸」と「主軸に対する配置順」について｜flex-direction
Flexboxではレイアウトの横と縦を、主軸・交差軸として判断します。そして、主軸に対するフレックスアイテムの配置順を、主軸の方向で判断します。
その「主軸・交差軸」「主軸の方向」は、flex-directionプロパティで変更でき、以下の値があります。
flex-directionプロパティの値
| 値 | 主軸・交差軸 | 主軸方向（始点→終点） |
| row（デフォルト値） | 主軸が横・交差軸が縦 | 左→右 |
| row-reverse | 主軸が横・交差軸が縦 | 右→左 |
| column | 主軸が縦・交差軸が横 | 上→下 |
| column-reverse | 主軸が縦・交差軸が横 | 下→上 |
折返しを指定｜flex-wrap
Flexboxは主に1行で構成されるレイアウトに利用することが多いですが、flex-wrapプロパティを利用することで複数行に折り返すことも可能です。
flex-wrapプロパティの値
以下、flex-wrapプロパティの値となります。
- nowrap（折り返しなし。デフォルト値）
- wrap（折り返しあり）
- wrap-reverse（折り返した場合、行の並び順を逆にする）
フレックスアイテムのサイズを設定
フレックスアイテムの横幅・伸縮を設定するには、フレックスアイテムの要素にflexまたはwidthのプロパティを指定します。
フレックスアイテムの横幅・伸縮を指定｜flex・width
flexプロパティはショートハンドとなり、それぞれ順番に以下のプロパティの値を指定します。
- flex-grow（伸び方の比率、または「伸び無し」を指定）
- flex-shrink（縮み方の比率、または「縮み無し」を指定）
- flex-basis（基本の横幅を指定）
flex-grow・flex-shrinkの値には、それぞれ伸縮の比率を正数で指定します。その際に0の値を指定すると、それぞれフレックスアイテムが「伸び無し」「縮み無し」となります。
また、flexプロパティでは値の一部を省略した指定や、キーワード値による指定も可能です。詳しくは文末の参考サイト内を確認してみてください。
flexプロパティのデフォルト値
flexプロパティのデフォルト値は、flex: 0 1 auto; となり、フレックスアイテムがそれぞれ以下の伸縮・横幅となります。
- flex-growの値が0となり「伸び無し」
- flex-shrinkの値が1となり「縮む」
- flex-basisの値が auto となり基本の横幅に適用
widthプロパティで基本の横幅を指定
フレックスアイテムの伸縮を上記のデフォルト値で利用する場合、flexプロパティを指定せずに、widthプロパティで基本の横幅を指定することも可能です。
また、フレックスアイテムに指定する横幅は基本の横幅のため、伸縮によっては指定したサイズとは異なるサイズで自動調整されます。
ベンダープレフィックスを指定する場合
Flexboxに関するベンダープレフィックスを指定するにはPostCSSが便利です。詳しくは以下のリンク先を参考にしてみてください。
まとめ
以上がFlexboxの利用方法についての簡単なまとめとなります。Flexboxの詳細については、以下の参考サイト内などを確認してみてください。