🌎 Flex

1) Flex container
2) Flex items

コンセプトアレンジ

容器のwidth heightが単独で設定されていない場合
これをitemの対応する部分のwidthheightに追加し、ground paddingを適用して幅と高さを作成します.

🌕 Flexコンテナのプロパティ

display

flex-direction

flex-wrap

justify-content

align-content

align-items

1. display

1)display:flex=>垂直、横最大
2)display:inline-flex=>水平、水平、最小

flex複数の容器

を垂直に接続する.

in-flexは、複数のコンテナを横方向に接続します.

2. flex-direction

1)Default(Row):左から右へ
2)Row-reverse:右から左へ
3)column:上から下へ
4)column-reverse:下から上へ

整列するスピンドル(上から下、上から下)

を指定します.

3. flex-wrap

1)nowrap:親コンテンツサイズと比較して、子コンテンツサイズの和は親コンテンツサイズより大きいが、親コンテンツ内で次の行に移動するのではなく、サイズに従って処理する(デフォルト:フレームワークに無理に合致)=>flex-surchは1であるためdefault
2)wrap:親の内容によってサイズが足りない場合は、次の行で描きます.(できればこれをお勧めします)
3) wrap-reverse

nowrapは、コンテナ内のアイテムの幅の合計が親コンテンツのサイズより大きい場合、

のサイズをフレームごとに強制的に調整することを示す.

4. justify-content

1)Flex Start:左揃え
2)Flex end:右揃え
3)センター:左右中央揃え
4)space-twon:間の余白
5)space-around:間+両端にも余白がある
6)stretch:埋め尽くす(デフォルト)

主軸揃え(横断)

5. align-content

(重要)space~を除いて、項目を1つの集合として並べ替えます.

1)Flex Start:上揃え
2)Flex end:下揃え
3)センター:上下揃え
4)space-tween:上部と下部のスペースがなく、各スペースは余分です
5)space-andround:上部と下部のスペースを含む各スペースは余分です
6)stretch:埋め尽くす(デフォルト)

交差軸の位置合わせ(縦横)

使用できるのは、Itemsが複数行(2行以上)で余白がある場合のみです
=>flex-wrap:wrapの場合有効

6. align-items

(重要)2行の場合、各行はアイテムソートされます.

1)Flex Start:上揃え
2)Flex end:下揃え
3)センター:上下揃え
4)stretch:埋め尽くす(デフォルト)
5)ベースライン:アルファベット順

flex lineを基準にアイテムを並べ替えます.

align-コンテンツとalign-アイテムの関係(重要)

Itemsがflex-wrapの複数行(2行以上)である場合、align-contentプロパティが優先されます.
したがって、align-itemsを使用するには、align-contentプロパティをデフォルト値(stretch)に設定する必要があります.

1行または複数行alig-contentのaig-items、

を書く

line-height

itemのテキストの垂直位置合わせの代わりに幅と高さを使用
おすすめはwidthとline-height

align-itemsとalign-コンテンツの違い

align-items(ソート):flex lineに基づいてプロジェクトをソートします.

align-content(対):flex lineをソートします.

---

flex/flex-inlineの例

ex)flex例