Flex와 Grid에 대해서 비교

Flex는 일차원적인 레이아웃, gird는 이차원적인 레이아웃을 만드는 것입니다

 

Flex는 주축과 교차축에 따라 아이템들을 배치하고 정렬할 수 있습니다

유연한 박스 모델로서, 아이템들의 크기와 간격을 자동으로 조절할 수 있습니다.

반응형 웹 디자인에 적합하여, 단순한 레이아웃에  사용하기 좋습니다

 

Grid는 행과 열로 이루어진 격자 모양의 레이아웃을 제공합니다.

복잡한 레이아웃에 사용하기 좋으며, 아이템들의 위치나 크기를 정확하게 지정할 수 있습니다.

픽셀 단위뿐만 아니라 fr(분수) 단위나 repeat() 함수 등을 사용하여 유연하게 레이아웃을 구성할 수 있습니다

 

flex와 grid의 장, 단점에 대해서 설명하겠어용

 

	flex	grid
장점	1. 유연하고 간단한 레이아웃 구성 가능 2. 반응형 웹 디자인에 적합	1. 이차원적인 레이아웃 가능, 2. 복잡하고 정교한 레이아웃 구성 가능
단점	1. 일차원적인인 레이아웃만 가능 2. 복잡한 레이아웃 구성 어려움	. 1. 지원하는 브라우저가 제한적임 2. 학습 곡선이 김

 

 

 

 

 

---

 

지원하는 브라우저

 

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

 

Can I use 에서 flex에 대한 지원하는 브라우저 정보를 볼 수 있습니다

Can I use 에서 flex에 대한 지원하는 브라우저 정보를 볼 수 있습니다

---

참고 사이트

 

flex와 grid를 공부할 때, 가장 참고하기 좋은 사이트이더라구요!

포스팅이 3년이 지나도 아직도 보기 좋더라구요~!!

 

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자