FlexboxはFlexコンテナーとFlexアイテムで構成されている。コンテナーの中にアイテムが複数ある感じ。
display:flexをCSSで記述して、範囲を決めると縦並びになっているHTMLを横並びにできる
Flexboxの６つの基本プロパティ
・flex-direction
ー rowは初期の。左から右並び
ー row-reverseは逆に右から左並び
ー columnを上から下へ
ー column-reverseは下から上へ
・flex-wrap
ー nowrapは初期値。ページが狭まる時折り返さない
ー wrapはページが狭まる時折り返す。上から下へ。
ーwrap-reverseはページが狭まる時下から上へ折り返す(使い道わからん)
・justify-content
ー flex-startは初期値。左詰め
ー flex-endは右詰め
ー centerは真ん中揃え
ー space-betweenは両端を端っこに。それ以外を均等に
ー space-aroundは↑の端っこにスペースがあるバージョン
ー space-evenlyは↑の隅っこにさらにスペースがあるバージョン
・align-items
ー stretchは小要素の範囲内全て。初期値
ー flex-startは上揃え
ー flex-endは下揃え
ー centerは真ん中揃え
ー bacelineは小要素のベースラインで揃える。文字の大きさとかバラバラでも１ラインで揃ってる的な
・align-content
ーstrechは初期値。親要素の範囲内全て
ー flex-startは上揃え
ー flex-endは下揃え
ー centerは真ん中揃え
ー space-betweenは最初と最後は端っこに。それ以外は均等に
・flex-flow
ー flex-flow:row(flex-direction) nowrap(flex-wrap);という風にまとめてできる