Photo by
peishum
Flex Itemのプロパティについて
align-selfプロパティ
align-selfとは、較差軸方向の揃えを指定します。
値
・flex-start：上揃え
・flex-end：下揃え
・center：中央揃え
Orderプロパティ
Order（オーダー）とは、要素の順番を指定できます。
値
・０：初期値
・１：最後に並べられる
・-１：一番前に並べられる
数字が低いと前へ、高いと後ろへ移動する。
flex-basisプロパティ
flex-basisは、主軸方向の幅を指定できます。
flex-directionプロパティが
row ⇒ 幅を指定
column ⇒ 高さを指定
値
・auto：要素の幅（初期値）
・数値（100px）：任意の幅
＊max-widthやmin-widthの指定が優先される
flex-growプロパティ
flex-grow（グロー）とは、主軸方向に余白があるとき、それぞれの要素をどれくらい伸ばすか指定できます。
値
・０：余白があっても伸ばさない（初期値）
・１、２：比率で分配する
例１）
300pxのコンテナに2つの要素ある
box1：box2＝1：２＝100px：200px
と分配される。
例２）
要素の1つだけ値を１に指定すると
余った余白の全てをその要素に分配される。
flex-shrinkプロパティ
flex-shrink(シュリンク)とは、コンテナの幅が足りないときにどの要素をどれだけ縮めるか指定できます。
値
・１：（初期値）
例）
コンテナから100pxはみ出しています。
3つの要素があり、flex-shrinkを指定したときの分配は
box1：box2：box3＝0：1：1＝0：50px：50px
と100pxを１：1で分配します。