CSS Flex 옵션 간단정리

CSS Flexbox 레이아웃은 주 축과 교차 축을 중심으로 요소를 조정하는 강력한 도구입니다. 여기서는 주요 CSS Flexbox 속성을 살펴보겠습니다.

1. display: 이 속성을 사용하여 flex 컨테이너를 정의합니다.

   • flex: 행이 기본 방향인 flex 컨테이너를 생성합니다.
   • inline-flex: 열이 기본 방향인 flex 컨테이너를 생성합니다.

2. flex-direction: 이 속성은 주 축을 설정하며, 이것은 항목이 어느 방향으로 배치될지를 결정합니다.

   • row: 항목들이 텍스트 방향과 일치하게 배치됩니다.
   • row-reverse: 항목들이 텍스트 방향과 반대로 배치됩니다.
   • column: 항목들이 세로로 배치됩니다.
   • column-reverse: 항목들이 세로로 역순으로 배치됩니다.

3. flex-wrap: 이 속성은 항목들이 컨테이너에 강제로 한 줄로 배치될지, 아니면 여러 줄로 나뉠지 결정합니다.

   • nowrap: 모든 항목들이 한 줄에 배치됩니다.
   • wrap: 항목들이 여러 줄로 나뉩니다.
   • wrap-reverse: 항목들이 역순으로 여러 줄로 나뉩니다.

4. flex-flow: flex-direction 및 flex-wrap 속성을 하나로 결합하는 단축 속성입니다.

5. justify-content: 이 속성은 주 축을 따라 항목들이 어떻게 배치될지 정의합니다.

   • flex-start: 항목들이 컨테이너의 시작 부분에 배치됩니다.
   • flex-end: 항목들이 컨테이너의 끝 부분에 배치됩니다.
   • center: 항목들이 중앙에 배치됩니다.
   • space-between: 항목들 사이에 동일한 공간이 있습니다.
   • space-around: 항목들 주위에 동일한 공간이 있습니다.
   • space-evenly: 항목들이 동일한 공간으로 분산 배치됩니다.

6. align-items: 이 속성은 교차 축을 따라 항목들이 어떻게 배치될지 정의합니다.

   • stretch: 항목들이 컨테이너를 채우도록 늘어납니다.
   • flex-start: 항목들이 컨테이너의 시작 부분에 배치됩니다.
   • flex-end: 항목들이 컨테이너의 끝 부분에 배치됩니다.
   • center: 항목

들이 중앙에 배치됩니다.
- baseline: 항목들이 기준선에 맞춰 배치됩니다.

7. align-content: 여러 줄의 항목들이 컨테이너 안에서 어떻게 배치될지 정의합니다. 이 속성은 flex-wrap 속성이 nowrap로 설정된 경우에는 적용되지 않습니다.

항목(아이템)에 대한 속성도 있습니다.

1. flex-grow: 항목이 주 축을 따라 늘어나는 방법을 결정합니다. 숫자 값이며, 기본 값은 0입니다.

2. flex-shrink: 항목이 공간이 부족할 때 어떻게 줄어들 것인지 결정합니다. 숫자 값이며, 기본 값은 1입니다.

3. flex-basis: 항목의 최적 크기를 설정합니다. 이것은 길이나 백분율일 수 있으며, 기본값은 auto입니다.

4. flex: flex-grow, flex-shrink, flex-basis를 한 번에 설정하는 단축 속성입니다.

5. align-self: align-items와 유사하지만, 개별 항목에 적용됩니다. 이 속성은 특정 항목이 컨테이너의 align-items 속성을 무시하고 싶을 때 사용합니다.