はじめに
これはFlexのチートシートとしての覚書。
親要素に設定
flex-direction
小要素の並びの向きを決める
row（デフォルト）
横向き 向き：→row-reverse
横向き 向き：←column
縦向き 向き：↓colmn-reverse
縦向き 向き：↑
flex-wrap
範囲に収まりきらなかった場合の処理
nowrap（デフォルト）
アイテムを折り返さずに一列に配置wrap
折り返して表示。下に折り返す。wrap-reverse
折り返して表示。上側に折り返す。
flex-flow
flex-directionとflex-wrapの設定を同時に行える。flex-direction :row nowrap;がデフォルト。
justify-content
揃え方。どちら寄りになるかなどの設定。
flex-start（デフォルト）
子要素を左側に寄せる。flex-end
子要素を右側に寄せる。center
子要素を中央に寄せる。寄せるだけ。space-between
左右にぴったり広げるように均等に配置。余白を作らない。space-around
左右にアイテム間の余白と同じサイズの余白を開けつつ、広げるように配置する。
align-content
justify-contentの縦方向版。
align-items
垂直方向の位置を設定する際に使用。
stretch（デフォルト）
小要素の上下の余白を埋めるように、アイテムの上下を広げる。
小要素の高さを変更する。flex-start
子要素の上辺を揃えて配置する。flex-end
子要素の上辺を揃えて配置する。center
子要素を中央に揃えて配置する。baseline
子要素の文字のラインを揃えて配置する。
justify-items
align-itemsの横方向版。
子要素に設定
order
順番を設定できる。
デフォルト値は0。
マイナス値は設定不可。
flex-grow
伸び率を設定できる。
デフォルト値は0。
マイナス値は設定不可。
flex-shrink
縮み率を設定できる。
デフォルト値は0。
マイナス値は設定不可。
flex-basis
ベースとなるサイズの設定ができる。
デフォルト値はauto
flex
flex-grow,flex-shrink,flex-basisの設定を同時に行える。
align-self
親要素に設定するalign-itemsを子要素ごとに設定する際に使用する。
パラメータはalign-itemsと同一。