（CSS）フレックスボックスの子要素で使えるプロパティまとめ

align-self

flex Item（子要素）の行間位置（交差軸に沿って）を決めるプロパティです。

align-self: flex-start;を指定すると、上揃えになります。

align-self: flex-end;を指定すると、下揃えになります。

align-self: center;を指定すると、中央揃えになります。

flex Item（子要素）の順番（主軸に沿って）を決めるプロパティです。

初期値は、order: 0; です。

flex Item（子要素）のサイズ（主軸に沿って）を決めるプロパティです。

flex-basis: auto;では、widthやコンテンツの幅になります。

flex-basis: 200px;では、サイズが上書きされます。

max-width（最大幅）やmin-width（最小幅）で制限されている場合は、上書きされません。

flex Item（子要素）のサイズの拡大（主軸に沿って）するためのプロパティです。

flex:grow:0が初期値で、flex Item（子要素）のサイズです。

flex-grow:1;にすると、flex Container（親要素）の余っている幅が指定した比率で割り当てられて、flex-Item（子要素）のサイズが拡大します。

flex Item（子要素）のサイズの縮小（主軸に沿って）するためのプロパティです。

flex-grow:1;が初期値で、flex Container（親要素）の足りない幅が指定した比率で割り当てられて、flex-Item（子要素）のサイズが縮小します。

flexを使うと、basisi・grow・shrinkを一括して指定することができます。

flex: initial;とすると、初期値が設定され、領域が余っても伸ばさない、領域が足らなかったら縮めるという指定になります。

flex: auto;とすると、領域が余ったら伸ばす、領域が足らなかったら縮めるという指定になります。

flex: none;とすると、領域が余っても伸ばさない、領域が足らなくても縮めないという指定になります。

flex: 1; とすると、領域に合わせて、指定した比率で伸びたり、縮めたりする指定になります。