Flex와 Grid의 차이점?

Flex와 Grid는 모두 CSS를 사용하여 레이아웃을 구성하는 데 사용되는 도구다. 그러나 각각의 방식은 다른 목적이 있다.

[출처] https://alpha.velog.io/tags/Flex

Flex 

• Flex는 1차원적인 레이아웃을 다루는 데 주로 사용된다. 주축과 교차축이 있으며, 이를 이용하여 요소들을 배치할 수 있다. 
• 주로 하나의 컨테이너 안의 요소들을 배치하고 정렬하는데 사용된다. 
• 작은 규모의 레이아웃에 적합하다.
• ex ) display : flex / flex-dirextion / justify-content / align-items / align-self 

Grid 

• CSS Grid는 2차원 레이아웃을 다루는데 주로 사용된다. 행과 열의 그리드로 구성되며, 각 셀에 요소들을 배치 할 수 있다.
• Grid는 복잡한 레이아웃을 만들고 정렬하는데 유용하다. 여러 행과 열에 걸쳐 요소들을 배치할 수 있다.
• Grid는 큰 규모의 레이아웃을 다루는 데 적합하며, 요소들 간의 복잡한 배치를 구현할 수 있다.
• ex) display:grid / grid-template-rows /grid-temaplate-columns / grid-gap / justify-items / align-items 등이 있다.

간단히 말하면 , flex는 1차원 레이아웃에 적합하고 요소들을 주축 또는 교차축에 따라 배치 및 정렬하는데 사용되며 , Grid는 2차원 레이아웃을 다루고 복잡한 그리드 시스템을 만드는데 사용된다. 종종 두 기술을 조합하여 유연한 웹 레이아웃을 만든다.

 

 

"Flexbox와 CSS Grid는 모두 CSS를 사용하여 웹 레이아웃을 구성하는 도구입니다. 그러나 이 둘은 서로 다른 레이아웃 모델을 제공합니다. Flexbox는 1차원(주축과 교차축) 레이아웃에 주로 사용되며, 요소들을 주축 또는 교차축에 따라 배치하고 정렬하는 데 주로 사용됩니다. 반면에 CSS Grid는 2차원(행과 열) 레이아웃을 다루며, 복잡한 그리드 시스템을 만드는 데 사용됩니다. Grid는 요소들을 행과 열에 배치하여 정렬하고, 특히 큰 규모의 레이아웃을 다루는 데 효과적입니다. 따라서 Flexbox는 주로 작은 규모의 레이아웃이나 요소들을 주로 정렬할 때 사용되고, Grid는 큰 규모의 레이아웃이나 복잡한 그리드 시스템을 다룰 때 사용됩니다."