1. Flex란?

1. Flex의 정의

CSS의 Flexbox(Flexible Box Layout) 은 웹 페이지에서 요소들을 가로 또는 세로로 유연하게 배치하고 정렬할 수 있게 도와주는 레이아웃 방식입니다.
기존에는 float, inline-block, position 같은 속성을 조합해서 복잡하게 정렬했지만,
flex는 단 한 줄의 선언으로 수평 정렬, 수직 정렬, 크기 비율 조정을 손쉽게 구현할 수 있습니다.

즉, 부모 요소(container) 가 자식 요소(item)들을 자동으로 배치하고,
공간이 늘거나 줄어도 그 안에서 자동으로 비율을 조절해주는 기능을 하는 것입니다.

 

2. 예시

2-1. Flex 적용전

 

• div 요소들은 위에서부터 아래로 하나씩 쌓인다.

2-2. Flex 적용 후

 

• 세로 -> 가로 변환
• 각 div의 길이만큼 크기가 변했다.
  • AAAAAAA의 길이와 BB의 길이가 달라졌다(이전에는 같았다).

 

즉, 정의대로 수평 정렬, 수직 정렬, 크기 비율 조정을 해주는 것이다.