Flex, Grid

Flex(Flexbox)

Flex는 단일 차원(행 또는 열)에서 아이템을 배치하는 데 사용된다.
주로 컨테이너 내의 아이템을 정렬하고 배치하는 데 사용되며, 이를 통해 동적이고 유연한 레이아웃을 만들 수 있다.
주로 Flex Container 및 Flex Items로 구성된다.

사용법

부모 요소인 Flex Container에 display: flex 또는 display: inline-flex를 적용하여 Flexbox를 활성화한다.

방향

row (기본값)

아이템들이 행(가로) 방향으로 배치

row-reverse

아이템들이 역순으로 가로 배치

column

아이템들이 열(세로) 방향으로 배치.

column-reverse

아이템들이 역순으로 세로 배치

정렬

flex-wrap

넘어가는 아이템을 짤리게 두는게 아니라 위로 넘기든 아래로 넘겨준다.

wrap

밑줄로 넘어가는 아이템을 넘김.

wrap-reverse

윗줄로 넘어가는 아이템을 넘김.

Grid

Grid는 2차원(행과 열)의 레이아웃을 다루는 데 사용한다.
행과 열의 구조를 가지며, 각각의 셀에 아이템을 배치할 수 있다.

기본구조

Flex와 비슷하게 Grid Container(그리드 컨테이너) 안에 자식 요소인 Grid Item(그리드 아이템)으로 구성되어있다.

사용법

Grid는 부모 요소인 컨테이너에 display: grid; 를 설정하는 것으로 시작한다.

그리드 형태 정의 (grid-template-rows, grid-template-columns)

• grid-template-rows는 행(row)의 배치
• grid-template-columns는 열(column)의 배치

.container {
	grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */

	grid-template-rows: 200px 200px 500px;
	/* grid-template-rows: 1fr 1fr 1fr */
}

간격 만들기(row-gap, column-gap, gap)

.container {
	gap: 20px;
	/* row-gap: 20px; column-gap: 20px; */
}

각 셀의 영역 지정

Grid 아이템에 적용하는 속성으로, 각 셀의 영역을 지정한다.

밑에 코드는 빨간색 영역을 지정하는 코드이다.

.item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	
    /* same code
	grid-column: 1 / 3;
	grid-row: 1 / 2;
    */
}

요약

Flex와 Grid는 혼합 사용할 수도 있고, 각각을 독립적으로 사용할 수도 있다.
Flexbox는 주로 컴포넌트의 작은 요소들을 배치하고 정렬하는 데 사용되고, Grid는 전체 페이지나 큰 레이아웃을 다룰 때 유용하다.
즉, 이미 결정된 레이아웃을 만들고 싶으면 Grid 속성을 사용
자유로운 레이아웃을 만들고 싶으면 Flex 속성을 사용