flex와 grid의 차이

flex와 grid는 모두 CSS 레이아웃 모듈입니다.
그러나 두 가지 레이아웃 모듈은 서로 다른 방식으로 작동하며 서로 다른 목적을 가지고 있습니다.

 

Flexbox

Flexbox는 1차원 레이아웃 모듈입니다. 즉, 요소를 수평 또는 수직 축으로 정렬할 수 있습니다.

Flexbox는 요소를 부모 요소 내에서 유연하게 배치하기 위해 사용됩니다.

Flexbox는 각 요소의 크기를 고려하지 않고, 컨테이너를 기준으로 요소의 배치를 결정합니다.

 

• 요소를 수평 또는 수직 축으로 정렬해야 할 때
• 요소가 동일한 크기여야 하거나, 부모 요소의 크기에 맞추어 크기를 조절해야 할 때
• 요소가 유동적인 크기를 가져야 할 때
• 요소들의 순서를 변경해야 할 때
• 작은 화면에서 레이아웃이 변경되어야 할 때

 

예를 들어, 네비게이션 바, 버튼, 입력 폼 등과 같은 작은 요소를 다룰 때 Flexbox는 매우 유용합니다.

또한 모바일 기기에서 사용자 인터페이스를 만들 때 Flexbox를 사용하여 간단하게 반응형 레이아웃을 만들 수 있습니다.

 

Grid

Grid는 2차원 레이아웃 모듈입니다. 즉, 요소를 행과 열로 배치할 수 있습니다.

Grid는 그리드라는 가상의 레이아웃을 만들어 요소를 배치합니다. Grid는 요소의 크기와 위치를 모두 고려하여 배치하며, Flexbox보다 더 복잡한 레이아웃을 만들 수 있습니다.

 

따라서, Flexbox는 요소의 수평 또는 수직 정렬에 사용되고, Grid는 요소의 위치와 크기를 고려하여 더 복잡한 레이아웃을 만들 수 있습니다. 또한, Flexbox는 각 요소를 개별적으로 배치하고 Grid는 여러 요소를 함께 배치하는 데 유용합니다.

 

1. 요소들을 정렬하고 배치해야 할 때
2. 여러 요소들이 다른 크기와 위치를 가지고 있을 때
3. 레이아웃의 각 부분에 대한 제어가 필요할 때
4. 복잡한 디자인 레이아웃을 만들어야 할 때

 

예를 들어, 대시보드, 웹 어플리케이션 인터페이스, 뉴스 기사 페이지 등과 같이 복잡한 레이아웃을 다룰 때

Grid는 매우 유용합니다. 또한, 이미지 갤러리, 제품 목록, 뉴스 피드 등과 같이

요소들이 다른 크기와 위치를 가지는 경우에도 Grid를 사용하여 간단하게 레이아웃을 만들 수 있습니다.

---

---

flex

display: Flex; // 컨테이너를 생성하기 위해 요소에 적용하는 속성입니다. display: flex를 지정하면 Flexbox 레이아웃을 사용하도록 설정됩니다.
flex-direction: Flex ; // 컨테이너 내에서 Flex 아이템들의 배치 방향을 지정하는 속성입니다. row, column, row-reverse, column-reverse 값을 가질 수 있습니다.
justify-content: Flex ; // 컨테이너 내에서 Flex 아이템들의 수평 방향 정렬 방법을 지정하는 속성입니다. flex-start, flex-end, center, space-between, space-around, space-evenly 값을 가질 수 있습니다.
align-items: Flex ; // 컨테이너 내에서 Flex 아이템들의 수직 방향 정렬 방법을 지정하는 속성입니다. stretch, flex-start, flex-end, center, baseline 값을 가질 수 있습니다.
flex-grow: Flex ; // 아이템이 Flex 컨테이너 내에서 차지하는 공간의 크기를 지정하는 속성입니다.
flex-shrink: Flex ; // 아이템이 Flex 컨테이너 내에서 차지하는 공간이 부족할 때, 아이템의 크기를 줄이는 정도를 지정하는 속성입니다.
flex-basis: Flex ; // 아이템의 초기 크기를 지정하는 속성입니다.
flex: flex-grow, flex-shrink, flex-basis의 축약형입니다.
align-self: Flex ; // 컨테이너 내에서 개별 Flex 아이템의 수직 정렬 방법을 지정하는 속성입니다.
order: Flex ; // 컨테이너 내에서 Flex 아이템들의 순서를 지정하는 속성입니다.

grid

display: Grid; // 컨테이너를 생성하기 위해 요소에 적용하는 속성입니다. display: grid를 지정하면 CSS Grid 레이아웃을 사용하도록 설정됩니다.
grid-template-columns, grid-template-rows: Grid; // 컨테이너 내에서 행과 열의 크기 및 개수를 지정하는 속성입니다.
grid-template-areas: Grid; // 컨테이너 내에서 그리드 영역의 이름을 지정하는 속성입니다. 이를 통해 Grid 컨테이너 내에서 요소들의 위치를 쉽게 조정할 수 있습니다.
grid-template: grid-template-columns, grid-template-rows, grid-template-areas의 축약형입니다.
grid-column-start, grid-column-end, grid-row-start, grid-row-end: Grid; //  아이템의 위치를 지정하는 속성입니다.
grid-column, grid-row: grid-column-start, grid-column-end, grid-row-start, grid-row-end의 축약형입니다.
grid-area: Grid; // 아이템의 위치와 이름을 지정하는 속성입니다. grid-row-start, grid-column-start, grid-row-end, grid-column-end의 순서로 값을 지정합니다.
grid-auto-rows, grid-auto-columns: Grid; // 컨테이너 내에서 자동으로 생성되는 행과 열의 크기를 지정하는 속성입니다.
grid-auto-flow: Grid; // 컨테이너 내에서 새로운 그리드 아이템이 생성될 때의 배치 방법을 지정하는 속성입니다.
justify-items, align-items: Grid; // 아이템들의 수평, 수직 정렬 방법을 지정하는 속성입니다.
justify-content, align-content: Grid; // 컨테이너 내에서 그리드 영역들의 수평, 수직 정렬 방법을 지정하는 속성입니다.
gap: Grid; // 아이템들과 그리드 영역 사이의 간격을 지정하는 속성입니다.