CSSのこれからはflexの時代だ！flexboxを使いこなすためのプロパティ一覧
float はもう古い、grid はまだ早い
まさに flex の時代！！（言い過ぎ）
けど、まぁ、flexbox の需要が高まってそうなのでまとめてみた。
そもそもflexboxってなに？
flexboxとは、Flexible Box Layout Moduleのことです。
以前から存在はしていましたが、ブラウザの対応や、仕様が定まっていなかったりといろいろな問題を抱えていましたが、flexboxの仕様がかたまり、モダンブラウザでの対応が進んだことで、手軽に利用することが出来るようになりました。
これからは「float」や「clearfix」で横並びにしたり、javascriptを使って高さや、位置を調整したりせず、flexboxを利用して、簡単に横並びで高さをそろえて、といったことことが出来ます！
Can I use
flexboxを使う親要素に指定するプロパティ一覧
- display: flex;
- 基本要素（これがないと始まらない）
- flex-direction
- 子要素の並び方
- flex-wrap
- 子要素の改行
- flex-flow
- 子要素の並び方と改行をまとめて指定
- justify-content
- 水平揃え
- align-items
- 垂直揃え
- align-content
- 縦方向行揃え
display: flex; のみを指定すると、すべての子要素が自身の幅に関わらず横並びになります。
自身の幅で改行させたい場合は flex-wrap: wrap; を指定する。
横にスクロールしていくようなデザインでなければ大抵は display: flex; と flex-wrap: wrap; はセットで指定します。
flexbox子要素の並びと改行 flex-direction , flex-wrap , flex-flow
flex-direction は子要素の並び順を反対にしたり、縦に（下から）並べたりするために指定します。
通常は要素の記述した順に並びますので指定する頻度は低いかもしれません。
flex-wrap は頻繁に指定する要素の一つです。
flex の初期値では nowrap で、子要素が折り返されないためパネルを並べたようなデザインを実現するためなどに使います。
flex-flow では上記二つのプロパティをまとめて指定できます。
flex-direction に指定するプロパティ
- row : 初期値、左から右に配置
- row-reverse : 右から左に配置
- column : 上から下に配置
- column-reverse : 下から上に配置
flex-wrap に指定するプロパティ
- nowrap : 初期値、折り返さず１列に配置
- wrap : 子要素の幅の合計が親要素の幅を超えたら折り返し
- wrap-reverse : 子要素の幅の合計が親要素の幅を超えたら上に折り返し
flex-flow に指定するプロパティ
flex-flow: row nowrap;（初期値） のように記述する。
プロパティ値は flex-direction flex-wrap を参照。
水平方向の揃え justify-content
親要素にスペースがある場合に子要素をどのように配置するか。
float を使用していると子要素間のスペースは margin を指定していましたが、
justify-content を指定することで、margin の指定を省くこともできます。
justify-content に指定するプロパティ
- flex-start : 初期値、左揃え
- flex-end : 右揃え
- center : 中央揃え
- space-between : 両端を詰めて均等に配置
- space-around : 両端を含め均等配置（margin に同じ値が指定されたような状態）
垂直方向の揃え align-items
高さ中央寄せを実現できるプロパティ。
table-cell にして vertical-align を、とかやらなくても夢の中央寄せができる！
align-items に指定するプロパティ
- stretch : 親要素の高さ、又はもっとも大きな子要素の高さに合わせて配置（上下に広がる）
- flex-start : 上揃え
- flex-end : 下揃え
- center : 上下中央揃え
- baseline : ベースライン揃え
垂直方向の行揃え（複数行） align-content
行（子要素）を垂直方向にどのように配置するかを指定できる。
flex-wrap: nowrap; が指定されていると1行になるので無効です。
align-content に指定するプロパティ
- stretch : 親要素に合わせて広げて配置
- flex-start : 上揃え
- flex-end : 下揃え
- center : 上下中央揃え
- space-between : 上下を詰めて均等配置
- space-around : 上下を含めて均等配置（上下の親要素と子要素とのスペースは子要素間のスペースの半分）
次回は子要素に指定するプロパティについてまとめます。
flex を制するものは CSS を制す！flexboxの子要素に指定するプロパティ