Flex/Grid - CSS

flex

CSSプロパティのセットで、コンテンツを並べ替えたり、スペースを区切ったりできます.
displayプロパティ.

// block, inline-block과 유사
display: flex;
display: inline-flex;

flex-決定方向-整列方向

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

previdence-コンテンツ軸に基づいてレイアウトの位置を制御するか、プロジェクト間の間隔

を設定する.

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

align-items-垂直軸(十字軸)に沿って移動
(マルチラインアイテムの場合+align-content-flex-cainerの縦軸を使用可能)

align-items: stretch; // 기본값
align-items: center;
align-items: flex-start;
align-items: flex-end;

flex-box構造が一望できます

その他のプロパティー

flex-wrap:サブエレメントを含む機能

flex-base:flexアイテムのサイズは、特定の軸(axis)方向に依存します.(サブエレメント用)

fle-grow:flex-basicの値から増加できるかどうかを指定し、割り当てられた値に基づいてコンテナに空間を割り当てます.(サブエレメント用)
ex)
flex-grow:1->すべてのサブエレメントに同じサイズのスペースが割り当てられます
flex-grow:2->特定のサブエレメントにのみスペースを割り当てる場合、

のスペースは他のサブエレメントの2倍になります.

flex-slich:flex-growとは逆の概念で、flex-baseの値からさらに縮小できるかどうかを指定し、サイズを固定または縮小する役割

を指定します.

align-self, order ...

Grid

表のように、縦列と横行に基づいて要素をソートできます.

Flexよりも複雑なレイアウト表現です.

display: grid;コンテナに適用されるプロパティ

1. 그리드 형태 정의

// 열 세개 1fr로 생성
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);

// 행 세개 100px로 생성
grid-template-rows: 100px 100px 100px;
grid-template-rows: repeat(3, 100px); 


2. 간격 만들기

row-gap: 10px;
column-gap: 20px;
gap: 10px;  // row, column 10px씩

プロジェクトに適用されるプロパティ

- 첫번째 칸 2x2 만들기

1. 시작번호 1~3 지정
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

grid-column: 1 / 3;
grid-row: 1 / 3;

2. 몇개의 셀 차지할 것인지 지정
grid-column: 1 / span 2; // 1번 라인에서 2칸
grid-row: 1 / span 2; // 1번 라인에서 2칸

+用語

fr-グリッドトラックサイズの単位で、グリッド-コンテナの使用可能なスペースを柔軟な単位でスケールして設定します.

メッシュコンテナ:メッシュの最外側領域

メッシュ項目:メッシュコンテナのサブ要素

グリッド軌道:グリッドの行(行)または列(列)

メッシュユニット:1つのメッシュ(コンセプト定義)

グリッド線:グリッドセルを分割する線

グリッド番号:グリッド線の各番号

グリッド間隔:グリッドセル間の間隔

グリッド領域:グリッドユニットのセット