[CSS]今からFLEX

現在まで
学習した位置の相対的、余分な値をよく利用して位置決めします.これはかなり面倒で原始的な方法です.
でも….
flexを勉強した以上、ソートは怖くないし、

flex

mdn/
Flexible Boxモジュールは、Flexboxとも呼ばれ、Flexboxインタフェースで物品間の空間割り当てと強力な位置合わせ機能を提供するための1次元レイアウトモデルとして設計されています.
1 Dレイアウトモデル!
まず

私たちは2つの軸を考えなければなりません.
行で堆積したMain axisと列で堆積したCross axis.
スピンドルとクロスシャフト!
主軸に垂直な軸を交差軸と呼びます.
1分コードさんは魚餅串でたとえた.
洗濯クリップだと思った.
物干しロープが主軸だと中の物を物干しクリップで挟んで干す感じ?!
基本的にこの軸の概念を理解してこそflexを理解することができる.
Flexboxは書き込みモードを想定しないことが重要です.従来のCSSは,左から右への横書き方式に傾いていた.ただし、現代のレイアウトには複数の書き込み方法が含まれている必要があるため、文書の左上隅から右にテキストが始まるとは仮定しません.新しい線が常に下に積み重ねられているとは仮定しません.
basis shrink grow

basis

サブエレメントに使用!
flex itemのサイズを指定します.width、height、その他の点の大きさは、軸の方向、および内部コンテンツの柔軟な大きさに依存します.デフォルト値はautoで、autoではwidthとheightの値が使用されます.
flex-based値が適用されている場合、width値とheight値は無視されます.
flex-basicプロパティ値は、コンテンツキーを使用するか、<「width」>を表す単位を使用します.
負の値は無効です.注意!

/* <'width'> 지정 */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* 원본 크기 키워드 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* 플렉스 아이템 내용 크기에 따라 조절 */
flex-basis: content;

/* 전역 값 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

flex-grow

サブエレメントに使用!
flex-grow値は、どれだけ増加できるかを示す属性です.
正の値を指定すると、flexプロジェクトごとに主軸方向のサイズが上に示すflex-bases値を超える可能性があります.
すべてのflex-grow値を1として指定すると、空き領域を増やすと、各項目に空き領域が割り当てられ、割り当てられた値に従ってサイズが大きくなり、空き領域が占有されます.
最初の項目が2で、残りの2つの項目が1である場合、100 px、50 px、50 pxを2:1の割合で割り当てます.

/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

では減少は?

flex-shrink