Flex vs Grid

 

참조
https://studiomeal.com/archives/197 

https://studiomeal.com/archives/533

https://www.youtube.com/playlist?list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9 

 

Flex

 

- flexbox : 행 또는 열을 주축으로 설정해 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식

플렉스 박스 방식으로 레이아웃을 구성하기 위해 플렉스 컨테이너를 만들며, 

플렉스 컨테이너 내에 플렉스 박스 방식으로 배치되는 요소를 플렉스 아이템이라고 한다.

 

출처 : 1분 코딩

 

이 때 아이템이 배치된 방향의 축을 메인축(이미지에서는 오뎅꼬치의 느낌?)

메인축과 수직인 축을 교차축이라 한다.

 

* flex container에 적용하는 속성

 

 

See the Pen 250304 flex container by キムハヨン (@bcpqctgf-the-animator) on CodePen.

* flex item에 적용하는 속성

 

 

See the Pen 250305 flex item by キムハヨン (@bcpqctgf-the-animator) on CodePen.

 

 

flexbox froggy 사이트

 

개인적으로는 1분 코딩 사이트를 보고 개념을 가볍게 훑어본 다음, 개구리 사이트로 복습하는 것을 추천한다!

문제 풀때도 개념을 다시 알려주기 때문에 간단하게 할 수 있다.

 

 

Grid

 

Grid는 예전에 정리해둔 글이 있어서 해당 포스팅으로 대체합니다.

https://hydeveloper.tistory.com/42

CSS Grid 정리

 

 

Flex vs Grid

 

출처 : 1분 코딩

 

이미지에 나와있듯이, Flex는 1차원적, Grid는 2차원적으로 고려한 레이아웃이다.

Flex는 한 방향 레이아웃이지만,

Grid는 가로, 세로 모두 고려한 두 방향 레이아웃으로 Grid를 이용해 복잡한 신문처럼 공간을 나눌 수 있다.