[IT} Flex와 Grid의 차이점 간단하게 요약!!

 CSS에서 레이아웃을 구성하는 두가지 방법이 있다, 그것이 바로 Flex와 Grid 이다.

 

---

1) Flex 

ㅡ 일차원적인 레이아웃 ( 유연하다)

ㅡ x축과 y출에 따라 아이템들을 배치하고 정렬한다.

ㅡ 크기와 간격이 자동조절 가능

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

장점 : 유연하고, 간단한 레이아웃 구성가능 , 반응형 웹디자인에 적합

단점 : 복잡한 레이아웃 구성 어려움 , 일차원적인 레이아웃만 가능하다.

 

2) Grid

ㅡ 이차원적인 레이아웃

ㅡ행(rows)과 열(columns)로 이루어진 격자 모양의 레이아웃을 제공한다.

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

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

장점: 이차원적인 레이아웃 가능, 복잡하고 정교한 레이아웃 구성 가능 

단점 : 지원하는 브라우저가 제한적임,

ㅡ