Flex / Grid

flex와 grid는 CSS의 display속성에 작성할 수 있는 값들이다.

display

레이아웃을 구성할 때 사용하는 속성
블록/인라인 요소들을 배치하거나
내부의 자식 요소들을 배치할 때 사용

⭐ flex

display의 값 flex

• 정렬하고 싶은 item들의 부모 요소, container에 사용

• 내부 item들을 가로 혹은 세로 방향으로 일렬로 정렬할 때 사용

• 내부 item들은 기본적으로 container에 딱 맞춰지며 container에 따라 늘어났다 줄어들었다하는 식으로 유연하게 변형됨

• 원래 1차원에 관련된 속성이라 한 줄을 구성할 때 사용하는게 정석

• 부모 요소에 flex를 적용하고 해당 요소나 자식 요소들에 여러 부가 설정을 할 수 있음

📌 container(부모 요소)에 사용하는 속성들

(flex) -direction / -wrap / -flow
justify-content / align-content / align-items

📌 items(자식 요소)에 사용하는 속성들

order
flex-grow / flex-shrink / flex-basis -> 단축속성 flex

⭐grid

disply의 값 grid

• 일종의 표를 디자인하는 것

• 정렬하고 싶은 item들의 부모 요소, container에 사용

• flex가 1차원, 하나의 줄만 다뤘다면
  grid는 2차원, 여러개의 줄, 행렬 개념

• container에 행과 열을 만들고, 그 칸에 맞춰 item을 넣는 방식

• 원하는 대로 레이아웃을 구성하기에 좀 더 자유로움

💡 Flex와 Grid가 사용되면 좋을 레이아웃

flex와 grid의 특징을 보면 알 수 있듯이, flex같은 경우에는 내부요소들이 가로 혹은 세로로 일렬 배치된 상태에서, container의 크기 변화에 따라 유연하게 움직일 필요가 있는 레이아웃에서 사용하기 좋은 속성이며, grid같은 경우에는 내부요소들이 여러 줄로 구성되어있고, 좀 더 복잡한 배치 형태를 가지고 있을 때, 해당 요소들의 자리를 지정해서 배치를 할 필요가 있는 레이아웃에서 사용하기 좋은 속성이다.

실제로 사용해봤을 때, flex같은 경우, 세부 속성 중, justify-content와 align-items를 이용해 일렬의 요소들을 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬 등의 여러 방식으로 정렬을 할 수 있기 때문에 이런식으로 한쪽으로 정렬이 필요할 때 많이 사용하게 되었다.
가장 간단하게 반응형 웹 디자인을 구현할 수 있는 방식이기도 해서 그런 레이아웃을 구성하고 싶을 때도 많이 사용했다.

grid같은 경우, 완전히 내가 의도한 대로 배치할 수 있기 때문에 flex로 구현하기 힘든 레이아웃을 구성할 때 사용했는데, 대부분 윗줄과 아랫줄의 아이템들이 다른 크기를 가지고 있음에도 불구하고 요소들의 묶음이 같은 칸을 차지하는 것 같이 정확하게 맞아 떨어질 때 사용하게 되었다.