CSS flexbox 早見表

flexbox親要素一覧

よく使うCSS flexbox

flex-wrap

子の横幅を指定して折り返させたい時　子にはwidthを指定

flex-wrap: wrap;

justify-content

左右中央寄せ。text-align:center;とは違う。

justify-content: center;

width:auto;
AAAAAA
BBBBB
CCCCCCCCCCCCCCCCC
DD

横幅左右ピッタリ均等

justify-content: space-between;

左右の横幅含めてスペース開けるて均等

justify-content: space-around;

align-items

上下中央揃え（要素が一行）

align-items: center;

align-content

上下中央寄せ（要素が複数行）　要 flex-wrap: wrap;

align-content: center;