[CSS]flexBox

정의

Flexbox : 웹 브라우저에서 요소를 수평 또는 수직으로 정렬하는 방법을 제공하는 CSS 레이아웃 모듈

Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델로 설계되었다.

Flexbox를 사용하면 요소를 부모 요소의 가로 또는 세로 방향으로 정렬하거나, 요소 간의 간격과 크기를 조정할 수 있다.

주요 개념

Flexbox의 주요 개념은 다음과 같다.

Flex Container와 Flex Item

Flex Container : flexbox 레이아웃을 적용하는 부모 요소
Flex Item : Flex Container 안에 들어가는 자식 요소

Main Axis와 Cross Axis

Main Axis : Flex Container에서 Flex Item이 정렬되는 주축 (flex-direction에 따라 결정됨)
Cross Axis : Main Axis에 수직으로 교차하는 축

Justify Content와 Align Items

Justify Content : Main Axis에서 Flex Item을 어떻게 정렬할 것인지를 결정
Align Items : Cross Axis에서 Flex Item을 어떻게 정렬할 것인지를 결정

Flex Direction

Flex Container의 Main Axis 방향을 결정 (row, row-reverse, column, column-reverse)

Flex Wrap

Flex Item이 Flex Container에서 한 줄에 모두 표시될 것인지, 아니면 여러 줄에 걸쳐서 표시될 것인지 결정

Flex Grow와 Flex Shrink

Flex Grow : Flex Item이 Flex Container 내에서 어떻게 공간을 확장할지 결정
Flex Shrink : Flex Container의 크기가 줄어들 때 Flex Item이 어떻게 줄어들지 결정

속성

Flexbox는 각각의 요소에게 다음과 같은 속성을 적용하여 레이아웃을 구성한다.

1. display: flex : flexbox를 적용할 부모 요소에 대해 적용.
2. flex-direction: flexbox 레이아웃이 수평 방향이 될지, 수직 방향이 될지를 결정.
3. justify-content: 요소들을 가로 방향으로 어떻게 정렬할지를 결정.
4. align-items: 요소들을 세로 방향으로 어떻게 정렬할지를 결정.
5. flex-wrap: 요소들을 한 줄로 표시할지, 여러 줄로 나누어 표시할지를 결정.
6. flex: 각 요소가 차지할 공간을 얼마나 할당할지를 결정.