Flexbox要約

練習問題の時はflexboxに紛らわしいので、DREAMコードALLYの動画を参考に整理してみました😀
Flexboxはcssの花!以前習ったfloatよりずっと便利になりました.FlexboxはModern Webのために提案されたCS 3の新しいレイアウト方式である.
Boxが大きくなると,各項目がどのように大きくなるかを自由に定義し,Boxの空間を埋め,小さくなるとどのように柔軟に配置されるかを定義できる.
Flexboxは全部で2種類を理解するだけで大きな絵を描くことができます.
まず、
このflexboxには、box自体に適した属性値であるcontainerが存在し、各属性値をitemに適用することができる.
コンテナに装飾できる属性値

display

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

itemに指定した属性値

orer

flex-grow

flex-shrink

flex

align-self

2つ目は
flexboxは、中心軸と反対軸を理解する必要があります.垂直軸が中心軸になると、水平軸は反対軸になります.品物は基本的に左から右に揃えられており、このとき水平軸が中心軸となり、逆も同様である.
コンセプトアレンジ
flexboxに最初に書き込む場合は、ボックスとして機能するコンテナクラスに「display:flex」と入力します.

.container {
	display: flex;
}

flex-direction
コンテナ内の要素の位置合わせの方向を指定します.
row:要素をテキストの方向に揃えます.
row-reverse:要素をテキストの反対方向に並べます.
colum:要素を上から下に並べます.
colum-reverse:要素を下から上に並べます.
column-reverseまたはrow-reverseを使用すると、アイテムの順序を変更できます.
justify-content
容器に物を置く方法を決めます.
flex-start:コンテナの左側に要素を配置(デフォルト)
flex-end:コンテナの右側に要素を並べます
center:エレメントを中央に配置コンテナ
space-then:要素間に同じ間隔があります.
space-andround:要素の周囲に同じ間隔を設定します.
align-items
反対の軸に位置合わせする方法を決定します.
flex-start:コンテナの上に要素を並べます
flex-end:コンテナの下部に要素を配置する
center:コンテナの垂直線に要素を中心に位置合わせ
ベースライン:コンテナの開始位置に要素を並べ替えます.
stretch:コンテナに要素を追加します.
flex-wrap
個々の要素を数行に並べて決定します.
nowrap:すべての要素を1行に並べます.
wrap:要素を複数行に並べます.
wrap-reverse:要素を複数行にわたって逆ソートします.
flex-flow
flex-directionとflex-wrapはよく一緒に使用されます.
flex-flowはそれに代わることができます.