簡単な、初心者ステップ:CSSフレックスボックス!

CSSで最も用途が広いモジュールの1つの基礎を通して話しましょう-- Flexbox！

Flexboxには2つの要素があります:親要素(' flexing 'のコンテナ)と子要素(flex項目).それは私たちがフォーマット、レイアウトを可能にし、スペースのサイズが不明である場合でも、整理することができますので、それは驚くほど汎用性です-またはそれはダイナミックです!

親プロパティー:

1これはFlexコンテナを定義する予定のビルディングブロックです.

.container {
  display: flex;
}

フレックスの方向は、あなたのフレックスボックスの親が展開する軸と、その軸上のどの方向を指し示すでしょう.
行:左から右へ
行リバース:左から右へ
列:北から南へ
コラム逆:南から北へ

.container {
  flex-direction: row (OR) row-reverse (OR) column (OR) column-reverse;
}

フレックスラップFlexboxは常にアイテムを1行に収めようとします-このプロパティは新しい行に折り畳むことができます.
NOWRAP :一行一行
ラップ:複数行(上から下へ)をラップする
ラップ反転:複数行(上から下へ)

.container {
  flex-wrap: nowrap (OR) wrap (OR) wrap-reverse;
}

このプロパティは、Flex用に元々宣言されている軸上のアライメントを定義します.
フレックススタート:アイテムはフレックス方向の開始に向けてパックされます
フレックス終わり:屈曲方向の端に向かって詰め込まれます
開始:モード方向の開始を開始する
end :書き込みモードの終了に向けてパックされます
左側:容器の左端に向けて左詰め
右:コンテナの右端に向けて左詰め
センター中心
スペース間:アイテムは均等に並んでいる
周りのスペース:アイテム均等均等に、その周りのスペースも
スペース均等:アイテムとエッジの間の間隔も

.container {
  justify-content: flex-start (OR) flex-end (OR) center (OR) space-between (OR) space-around (OR) space-evenly (OR) start (OR) end (OR) left (OR) right (OR) you get the idea;
}

5 .整列項目これは、項目が現在の行の交差軸上でどのようにレイアウトされるかを定義します.
ストレッチ:(デフォルト)コンテナを埋めるためにストレッチ
フレックススタート:クロス軸の開始
フレックスエンド:クロス軸の終わり
センター:アイテムは、交差軸
ベースライン:アイテムが整列され、ベースラインが整列される
この1つについては、あなたのフレックスがLになると想像してください.フレックス終わりは、彼らを下側(南)で整列させます.センターは、センターの中心に沿って彼らをセンターの中心に沿ってセンターにします.ストレッチは、彼らがセンターから等しい南北スペースを満たすようにするでしょう.ベースラインは、ベースラインによって北に彼らをセンターにします.

.container {
 align-items: (value here)
}

6 .コンテンツを整列させます.これは、十字軸の余分のスペースの範囲内でフレックス容器のラインを整列します.このプロパティは、マルチラインのflexコンテナにのみ影響を与えます.
normal : (デフォルト)
フレックススタート:コンテナの開始に詰め込まれるアイテム
フレックス終わり:コンテナの終わりまで詰め込まれるアイテム
センター:コンテナ中心のアイテム
スペース間:コンテナの開始から終わりまで均等に分配されるアイテム
スペース周り:均等に均等に各ラインの周りのスペースで配布アイテム
空間均等に:アイテムは均等にそれらの周りの均等なスペースで配布されます
ストレッチ:ラインストレッチを取るストレッチ

.container {
  align-content: (value here)
}

ギャッププロパティは、Flex項目間のスペースを処理します.これはアイテム間でのみ適用され、エッジに影響しません.
宣言できます.
GAP : 20 px (デフォルト)
ギャップ:20 px 20 px
行ギャップ:20 px
コラムギャップ

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px;
  row-gap: 10px;
  column-gap: 20px;
}

子のプロパティ

これは、Flexコンテナに表示される順序項目を制御できます.項目が同じ順序を持っている場合、それらはソース順にデフォルトである.

.item {
  order: 5;
}

フレックスグロースは、必要に応じてフレックスアイテムの成長能力を定義します.値は比例です.
たとえば、すべての項目が1の値を持つ場合、スペースは子供たちの間で均等に配布されます.つのアイテムが2を持つならば、それは他のすべてのアイテムの割り当てられたスペースの2倍を占めます.

.item {
  flex-grow: 4;
}

フレックス縮小は、これが成長の反対です、そして、必要ならばアイテムが縮小するのを許します

.item {
  flex-shrink: 3;
}

3 . Align selfこれは、既定の位置揃えを可能にします(親のAlignアイテムの1つ)は、特定の項目でオーバーライドされます

.item {
  align-self: auto (OR) flex-start (OR) flex-end (OR) center (OR) baseline (OR) stretch;
}

これは、フレックスボックスのハングを得るためにしばらくかかることができますが、それは価値がある!
CSSフレックスボックスhereにこの驚くべきビジュアルガイドをチェック!