[TIL] CSS Breakdown (FLEX🤘)

What is FLEX??😎

まず、flexは、ボックス空間を区切るCSS属性のセットであるソートに関連する.
私はこれを流れの程度と理解しています.
(左から右へ/右から左へ/上から下へ/下から上へ)😀
忘れないでください.display: flex;は部です.苗はい.カニ.応用!!

/* 부모에게 적용을 해주어야 합니다!!!!!! */
display: flex;
display: inline-flex; /*부모가 자식의 컨텐츠만큼만 자리를 차지합니다*/

このとき親Flex-container,影響を受けた子をFlex-itemと呼ぶ.flex自分の直系の子供だけを含む!影響.(子孫じゃない!!)
ほとんどのソートのプロパティは親によって制御されます.

1. flex-direction

流れを意味し、4つの方向があります.

/* 기본 값이며, float:left;와 같다 */
flex-direction: row;
/* 기본 값이며, float:right;와 같다 */
flex-direction: row-reverse;
/* 기본적으로 주루루룩 쌓이는 모습과 같다 */
flex-direction: column;
/* 역순으로 주루루룩 쌓이는 모습과 같다 */
flex-direction: column-reverse;

justify-contentに入る前に、main-axisとcross-axisを理解する必要があります.
これは、flex-directionとして指定されたことに関連する.rowに設定すると、緑が主軸、赤が交差軸になります!column逆に、各軸には始点と終点がある.
flexを使用する絶対的な理由は、整列と配置に入る前に、主軸と交差軸にもう一度注意してください.

2. justify-content

main-axisを基準に並べ替え!!(縦横に考えず、主軸に注意!!)

display: flex;
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

最初の3つの値は直感的に理解できますが、boundとbetterの違いはあいまいです.
between両端が伸びる形をしています.around各物品の左右に同じ幅の空白がある.
△説明より写真のほうが分かりやすい.

3. align-items, align-content

align-itemsはcross-axisを基準として並べ替えられる.align-contentは、flex-containerのcross-axis軸上の物品が複数行ある場合に使用できます.(align-selfは、サブエレメントを書き込むプロパティです.混同しないでください!!)align-selfは子要素に使用され、親要素align-itemsを上書きします.

.container {
  display: flex;
  align-items: stertch; /* 기본값 */
  align-items: center;
  align-items: flex-start;
  align-items: flex-end;
}

4. flex-wrap

サブアイテムのサイズ値を無視するかどうかに関連するプロパティ.
つまり、子供たちの大きさを無視して、彼らを苦しめているのですか?
これは子供たちの大きさを認め、親の空間が足りなければ、次の行に残すかどうかの違いです.nowrapはデフォルト値であり、無視された値です.wrapを使用すると、より信頼性が向上します.

flex-wrap: nowrap; /*default*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;

上下ともに同じ幅の物の値ですが、違いはwrapの値が与えられているかどうかです.
上:no-wrap以下:wrapwrap-reverseちょっと不調和な奴です.
すべての順番を入れ替えるわけじゃない!!!
きちんと積み上げてから、ロープだけを逆さに回します.

flex-basis

サブエレメントに使用!!!

item列のサイズを指定します.

flex-direction.(rowファセット,columnファセット高さ)

width,heightの値は無視されます.

order

サブエレメントに使用!!!flex-itemの順序を決定します.数字の順序が不確定です.数量の大きさを決める.数が少ないほど優先度が高くなります.(負の値も使用できます.)

😮New!!

display: flex;,ウィンドウの幅を縮小し,リストは少し反応型のように縮小した.

ただし、コンテンツサイズより小さくはありません.(当たり前でしょうか?)

dislay: inline-flex;に設定し、ウィンドウの幅を小さくし、ウィンドウを左右にスクロールさせる