CSS「Flex」(Flex)ボックス

📍 Flexboxとは?
CSSのflexは、要素のサイズや位置を簡単に特定できるツールです.

箱と物品は行や列を通じて自由に置くことができる機能です.

flexboxの前にtable、position、floatが使用されていました.
▼floatの本来の目的は、画像やテキストをどのように配置するかを定義することだったが、htmlではレイアウトの面で劣勢だったため、floatを使うには多くの用途があり、結果的に本来の目的から逸脱し、flex boxが現れた後、floatは元の目的で使用できるようになった.

1.Flexboxの特性
FlexBoxを使用するには2段階のタグが必要です.

コンテナとしての親ラベル

物品のサブタブ

コンテナに入る属性値とエントリの属性値に分けられます.

中心軸と反対軸があります.

の中心軸を垂直または水平に維持すると、別の軸が変更されます.
ex.)項目が上から下、すなわち垂直に位置合わせされている場合、中心軸は垂直で、もう一方の軸は水平である.

2. Flex Container



flex-direction
:flexboxの主軸を決定します.プロジェクトの方向を決定します.flex-direction: row;(デフォルト):水平方向に整列します.(left → right)flex-direction: row-reverse;:水平方向の逆ソート.(right → left)flex-direction: column;:垂直方向に整列します.(top → bottom)flex-direction: column-reverse;:垂直方向に反対します.(bottom → top)

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap
:1行の項目がいっぱいになった場合、その行をスキップするかどうかを決定します.flex-wrap: nowrap;(デフォルト):すべてのアイテムが1行に並んでいます.flex-wrap: wrap;:プロジェクトは複数の線上に分布します.(top → bottom)flex-wrap: wrap-reverse;:プロジェクトは複数の線で、下から上へ並べられています.(bottom → top)

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

📌 flex-flow
: (flex-direction + flex-wrap) shorthand.container { flex-flow: column wrap; }
justify-content
:中心軸でソートします.空白を残したい時に使います.justify-content: flex-start;(デフォルト):itemを開始点に集約します.justify-content: flex-end;:プロジェクトをエンドポイントに集合します.justify-content: center;:プロジェクトを回線の中央に集中します.justify-content: space-between;:最初の項目は始点で、最後の項目は終点で、スペースは均等に分けられます.justify-content: space-around;:各項目の両側に同じサイズの空白があります.余白は各項目間の余白より小さい.justify-content: space-evenly;:各項目の間とエッジの空白は同じです.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

align-items
:itemを写真の反対の軸で並べ替えます.align-items: stretch;(デフォルト):すべてのコンテナを追加します.(min-width/max-width値は変わらない.)align-items: center;:プロジェクトを回線の中央に集中します.align-items: baseline;:itemベースライン順

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

align-content
:itemを写真の反対の軸で並べ替えます.flex lineに並べられています.
ξnowrap(線が1本形成されている)であれば、使用する意味はありません.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

▼▼alin-content&align-items区分!

align-content:flex lineをソートします.nowrapであれば、使う意味がありません.nowrapは強制的に1行に描画されるのでflex lineは1行です.

align-items:flex lineを基準にアイテムをソートします.align-itmesは、1行の場合もその行内でソートされるため、動作します.

3. Flex Items


order
:アイテムの順序を変更します.

.item {
  order: 5; /* default is 0 */
}

flex-grow
:コンテナが大きくなると、各アイテムがどのような割合で大きくなるかを決定します.
単位(px、emなど)のない値(数値のみ)を指定します.これはパーセントを意味します.負数は使用できません.

.item {
  flex-grow: 4; /* 기본값: 0 */
}

flex-shrink
:コンテナが小さくなると、各アイテムがどの割合で縮小されるかを決定します.
負数は使用できません.

.item {
  flex-shrink: 3; /* 기본값: 1 */
}

flex-basis
:コンテナのサイズが変化する前に、基本状態でのサイズを決定します.
物がどれだけのスペースを占めるかをもっと詳しく説明します.(それぞれ60%、30%、10%などを占めるかどうかを指定できます.)

.item {
  flex-basis:  | auto; /* 기본값: auto */
}

📌 flex
: (flex-grow + flex-shrink + flex-basis) shorthand.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

デフォルト:0 1 auto

第2のflex-shrink、第3のflex-basisパラメータは必須ではありません.

▼▼▼▼属性を個別に設定するよりも、2479142行短くしたほうがいい!

align-self
:アイテムごとにソートできます.△容器に指定されたものを除き、1つのものしか指定できません.

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

▶ playgroundを直接設定して確認できます.😀
reference
flexbox Coding-Everybody