Flex와 Grid의 차이점
1. 레이아웃 축과 방향
- Flex : 1차원적인 1방향 레이아웃 시스템입니다. 즉, 행 또는 열 방향으로 정렬할 수 있습니다.
- Grid : 2차원적인 2방향 레이아웃 시스템입니다. 즉, 행과 열 방향으로 배치할 수 있습니다
위 이미지를 보면 flex와 grid의 차이점을 쉽게 알아볼 수 있습니다.
flex는 단 1방향으로 흘러가는 반면에 grid는 2방향으로 흘러갑니다.
쉽게 말해 flex는 grid보다 단순한 레이아웃을, grid는 flex보다 더 정교한 레이아웃을 구성합니다.
2. 레이아웃 모델
- Flex : 콘텐츠 중심입니다. 아이템의 크기와 위치는 주로 콘텐츠에 따라 결정됩니다.
- Grid : 컨테이너 중심입니다. 그리드 자체의 구조를 먼저 정의하고 그 구조에 맞춰 콘텐츠가 배치됩니다.
3. 기타 기능
- Flex : 요소의 정렬에 강력한 기능을 제공하여 간격과 맞춤 정렬을 쉽게 제어할 수 있습니다. (
justify-content,align-items,align-self등) - Grid : 간격과 라인 제어에 강력합니다. (
grid-gap,grid-row,grid-column)을 사용하여 요소를 자유롭게 배치하고 간격을 제어할 수 있습니다.
✅ 참고 사이트!
고양이 간식 사줄려고 개발하는 사람