Flexbox와 Grid

Flexbox

• Flexible Box Layout
• 1차원의 레이아웃 시스템
• 주로 한 방향(가로 또는 세로)으로 아이템을 배치하고 정렬하는데 유용
• 컨테이너 (display:flex) 안의 아이템들을 쉽게 정렬, 정렬 순서 변경, 간격 조정 가능
• 네이게이션 바처럼 한 줄에 요소를 나란히 배치할 때 사용
• 콘텐츠 중심 : 콘텐츠가 레이아웃을 결정, 자식 아이템의 크기, 내용물에 따라 자동으로 배치되기 때문
• 컨테이너의 크기나 위치에 맞춰 자동으로 정렬

Grid

• 2차원의 레이아웃 시스템
• 행과 열을 동시에 다룰 수 있음
• 컨테이너(display:grid) 안에 그리드 영역을 만들고 아이템을 격자에 배치
• 웹 페이지 전체 레이아웃처럼 복잡한 구조에 사용
• 카드 리스트에서 행/열을 동시에 다루어야 할 때 사용
• 레이아웃 중심 : 아이템의 크기나 내용보다 전체 레이아웃 구조가 우선
• 행과 열을 사전에 정의하고 그 격자에 요소를 배치하는 방식

컨테이너란?

• 컨테이너 = 부모요소
• Flexbox나 Grid를 사용할 때는 반드시 부모 요소에 display:flex 또는 display:grid를 선언해야함
• 그 안의 자식 요소들이 flex 또는 grid의 규칙에 따라 배치
• 컨테이너가 설정되어야만 안의 아이템들이 정렬 규칙을 따름