CSS Flex Container & Items

Flex

flexプロパティは、flexプロジェクトがコンテナの占有スペースに適応するためにどのように増大または減少するかを設定するプロパティです.つまり、レイアウト設定専用機能です.私たちが見たページの大部分は垂直に羅列されています.block要素の特性に基づいて、垂直に羅列されたページを作成できます.
ただし、この構造で水平構造を構築する必要がある場合は、いくつかの方法が使用できますが、flexプロパティの使用を推奨します.

ショートカットのプロパティ

ショートカット属性は、異なるCSS属性値を指定できるCSS属性です.ショートカットアトリビュートを使用すると、簡潔で読み取りやすいスタイルシートを作成し、時間と体力を節約できます.

Flexはショートカット属性

Flex Container

display

flex-direction

flex-wrap

justify-content

align-items

Flex Items

order

flex-basis

flex-grow

flex-shrink

ContainerとItemsで使われている要素はそれぞれあります.私が書いた以外に、いくつかあります.私は少ないものを選んで、よく使うものだけを説明します.😅

Flexbox

Flexboxは、レイアウトを処理するときに一度に1つの次元(行または列)のみを処理する1次元と呼ばれます.これは、行と列を同時に調整するCSSメッシュレイアウトの2 Dモデルと比較されます.デフォルトでは、flexboxはこのスペースを最後のサブエレメントの後の空白スペースとして保持します.
flexはflexboxと呼ばれます.
flexboxを処理するには、主軸と交差軸の2つの軸の定義を理解する必要があります.主軸はflex-directionプロパティで指定され、交差軸は垂直な軸で決定されます.flexboxの動作は最終的にこの2つの軸に復元される問題であるため,それらがどのように動作しているかを最初から理解することが重要である.

Flex Container

ドキュメントの領域でflexboxが存在する領域をflex containerと呼びます.flex containerを作成するには、flexを使用してゾーン内のcontainer要素の表示値を指定します.

display

displayプロパティのみがflexを指定してflexコンテナを作成する場合、flexに関連する他のプロパティは以下のようにデフォルト値として指定されます.

項目は行として表示されます.(flex-directionプロパティのデフォルト値はrow).

プロジェクトは、主軸の開始線から開始します.

プロジェクトは、プライマリ次元では増加しませんが、減少できます.

アイテムは、交差軸のサイズを満たすために追加されます.

flex-basicプロパティはautoとして指定されます.

flex-wrapプロパティはnowrapとして指定されます.

flexプロジェクトは、各プロジェクトの内部要素サイズに基づいて主軸に沿ってソートされます.containerよりもサイズの大きい項目がある場合は、改行せずに主軸方向にオーバーフローします.ある項目の高さが別の項目より大きい場合、残りのすべての項目は交差軸に沿って相応に引き伸ばされます.

flex-direction

スピンドルはflex-directionによって定義され、4つの値があります.

行またはrow-reverseを選択すると、主軸は行内方向に沿っています.

flex-direction: row;  (기본값)
flex-direction: row-reverse;

列またはcolumn-reverseを選択すると、主軸はページの上部から下にブロック方向に沿って移動します.

flex-direction: column;
flex-direction: column-reverse;

逆戻り、開始線と終了線が逆戻りしているので、プロジェクトの流れも逆です.

flex-wrap

flexboxは1次元モデルですが、flexプロジェクトを複数行にリストできます.この場合,各行が新しいflex containerであると考えるべきである.スペース割り当ては、そのローでのみ行われ、他のローは影響を受けません.

アイテムを複数行にリストするには、flex-wrapプロパティの値をwrapとして指定します.プロジェクトが1行に入れないほどオーバーフローした場合は、別の行に配置されます.

flex-wrap: nowrap; (기본값)
flex-wrap: wrap;

justify-content

主軸に沿ってflexプロジェクト行を位置合わせする方法を指定します.

初期値はflex-startです.この値を指定すると、flexプロジェクト行のプロジェクトがflexコンテナの開始線からソートされます.

justify-content: flex-start; (기본값) /*  요소들을 컨테이너의 시작점부터 정렬 */
justify-content: flex-end;   /* 요소들을 컨테이너의 끝점부터 정렬 */
justify-content: center;     /*  요소들을 컨테이너의 중앙으로 정렬 */
justify-content: space-between;   /*  주축 방향 여유 공간을 flex 항목 사이의 공간에 균등 배분 */
justify-content: space-around;   /*  시작선 및 끝선과 flex 항목간 공간도 균등 배분에 고려하므로 시작선 및 끝선과 flex 항목 간의 공간의 크기를 1로 배분한다면 flex 항목 사이의 공간은 2로 배분 */
justify-content: space-evenly;   /*  여유 공간을 flex 항목 사이의 공간 및 시작선 및 끝선과 flex 항목 간의 공간에 모두 균등하게 배분 */

justify-content. MDN

align-items

交差軸に沿ってflexプロジェクト列を整列する方法を指定します.

初期値はstretchで、この値を指定すると、Flexアイテムの高さはFlexコンテナ内のFlexアイテム行の最大高さとして指定されます.したがって、flexプロジェクトが1行動作すると、flexプロジェクトは交差軸方向にflex containerを充填します.

align-items: stretch;  (기본값)
align-items: flex-start;   /*  요소들을 컨테이너의 시작점부터 정렬 */
align-items: flex-end;    /* 요소들을 컨테이너의 끝점부터 정렬 */
align-items: center;    /*  행에 배분된 공간의 가운데 라인에 정렬 */

align-items. MDN

Flex Items

flex-basis

flexアイテムの初期サイズを指定します.box-サイズを指定しない場合は、コンテンツボックスのサイズを変更します.

このプロパティのデフォルト値はautoです.この場合、ブラウザはプロジェクトにサイズがあるかどうかを確認します.

flexプロジェクトにサイズが指定されていない場合、flexプロジェクトのコンテンツサイズはflex-based値として使用されます.したがって、flex containerでdisplay:flexプロパティを指定すると、flexエントリは各コンテンツサイズと同じスペースを占有します.

auto値を持たないflex-basedとwidth(flex-direction:columnの場合height)の値を同時に適用した場合、flex-basesが優先されます.
flex-basis. MDN

flex-grow

flex-grow値を正の値に指定すると、flexプロジェクトごとに主軸方向のサイズをflex-base値以上に増やすことができます.

flex-grow値を1に指定すると、空き領域は各項目に同じように割り当てられ、各項目は主軸に沿って割り当てられた値に従ってサイズを増やしてスペースを占有します.

flex-grow値を使用して他の小さな値を指定すると、それに応じて異なる空間値が割り当てられます.

通常、flex-growを使用する場合、flex-schripとflex-basesのプロパティが同時に使用されます.

flex-grow. MDN

flex-shirink

flex-growプロパティが、主軸上の残りのスペースをプロジェクトに割り当てる方法を決定した場合、flex-schripプロパティは、主軸上のスペースが不足している場合に各プロジェクトのサイズをどのように縮小するかを定義します.

flexコンテナにすべてのflexプロジェクトを含めるのに十分なスペースがなく、flex-srift値が正の値である場合、flexプロジェクトはflex-basesで指定したサイズより小さくなります.

flex-growプロパティと同様に、より大きなflex-shill値を持つプロジェクトのサイズはより速く減少します.

flex-growとflex-sriftの値は比率であることに注意してください.flexプロジェクトのflexプロパティを1、1、200 pxに指定し、1つのプロジェクトの拡大倍数を別のプロジェクトの2倍にしたい場合は、flexプロジェクトのflexプロパティを2、1、200 pxに指定できますが、flexプロパティ値を10、1、200 pxに指定し、拡大倍数の2倍のプロジェクトのflexプロパティ値を20、1、1、1に設定します.200 pxに指定しても同様に動作します.
flex-shirink. MDN