はじめに
これは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と同一。