[css] flex 마스터하기

Flexbox는 1차원 레이아웃 시스템으로, UI 디자인의 유연성과 반응성을 극대화.
컨테이너와 아이템 개념을 중심으로 다양한 속성을 통해 정렬, 크기 조절, 순서 변경 등 복잡한 레이아웃을 손쉽게 구현할 수 있음

1. Flex 컨테이너 (Flex Container) 속성

• Flex 아이템들을 감싸는 부모 요소에 적용하여 Flexbox 레이아웃 방식을 정의.

• display: flex: Flex 컨테이너로 설정. 자식 요소는 Flex 아이템이 됨.

• flex-direction: 주 축(main axis) 방향 설정

  • row: 가로 방향 (기본값), 왼쪽부터 배치.
  • row-reverse: 가로 방향, 오른쪽부터 배치.
  • column: 세로 방향, 위쪽부터 배치.
  • column-reverse: 세로 방향, 아래쪽부터 배치.

• flex-wrap: 아이템 줄 바꿈 설정.

  • nowrap: 줄 바꿈 안 함 (기본값). 한 줄에 배치.
  • wrap: 넘치는 아이템 다음 줄로 줄 바꿈.
  • wrap-reverse: wrap과 동일, 줄 순서 역순.

• flex-flow: flex-direction과 flex-wrap 단축 속성. 순서 무관.

  • 예시: flex-flow: row wrap;

• justify-content: 주 축 방향 아이템 정렬.

  • flex-start: 시작 부분 정렬 (기본값).
  • flex-end: 끝 부분 정렬.
  • center: 중앙 정렬.
  • space-between: 아이템 사이 동일 간격, 양 끝 붙임.
  • space-around: 아이템 주변 동일 간격, 양 끝 간격은 사이 간격의 절반.
  • space-evenly: 모든 간격 동일.

• align-items: 교차 축(cross axis) 방향 아이템 정렬.

  • stretch: 교차 축 전체로 늘림 (기본값). 아이템 높이 auto 또는 명시적 height 없을 때 적용.

  • flex-start: 교차 축 시작 부분 정렬.

  • flex-end: 교차 축 끝 부분 정렬.

  • center: 교차 축 중앙 정렬.

  • baseline: 텍스트 베이스라인 기준 정렬.

    baseline은 글자의 밑선, 즉 글자를 쓸 때 기준이 되는 가상의 선을 의미

• align-content: 여러 줄 아이템의 교차 축 정렬 (flex-wrap: wrap 또는 wrap-reverse 시 적용).

  • stretch: 각 줄 교차 축 전체로 늘림 (기본값).
  • flex-start: 모든 줄 교차 축 시작 부분 정렬.
  • flex-end: 모든 줄 교차 축 끝 부분 정렬.
  • center: 모든 줄 교차 축 중앙 정렬.
  • space-between: 각 줄 사이 동일 간격, 첫/마지막 줄 붙임.
  • space-around: 각 줄 주변 동일 간격, 양 끝 줄 간격은 사이 간격의 절반.
  • space-evenly: 모든 줄 간격 동일.

예시

<div style="display: flex; justify-content: center; align-items: center; height: 100px; border: 1px solid black;">
  <div style="width: 50px; height: 50px; background-color: lightblue;">1</div>
  <div style="width: 50px; height: 50px; background-color: lightcoral;">2</div>
  <div style="width: 50px; height: 50px; background-color: lightgreen;">3</div>
</div>

2. Flex 아이템 (Flex Item) 속성

각각의 Flex 아이템에 적용하여 개별적인 배치 방식을 설정

• order: 아이템 순서 명시적 지정. 작은 숫자 우선 배치 (기본값 0).
• flex-grow: 남는 공간에 대한 아이템 확장 비율 설정 (기본값 0).
• flex-shrink: 공간 부족 시 아이템 축소 비율 설정 (기본값 1). 0 설정 시 축소 안 함.
• flex-basis: 아이템 초기 크기 설정. width/height보다 우선 적용. auto (기본값, 콘텐츠 크기), 0 (최소 크기, flex-grow 적용 시 확장).
• flex: flex-grow, flex-shrink, flex-basis 단축 속성.
  • none: 0 0 auto (확장/축소 안 함, 자동 크기).
  • auto: 1 1 auto (확장/축소 가능, 자동 크기).
  • initial: 0 1 auto (확장 안 함, 축소 가능, 자동 크기).
  • <grow> <shrink>? <basis>? 순서로 값 설정.
• align-self: 개별 아이템의 교차 축 정렬 설정. 컨테이너 align-items 덮어씀. 값은 align-items와 동일 (auto, stretch, flex-start, flex-end, center, baseline).

예시

• flex-grow: 1: 첫 번째, 두 번째 아이템이 남는 공간을 1:1 비율로 가져갑니다.
• flex-grow: 2: 세 번째 아이템이 남는 공간을 다른 아이템의 2배 비율로 가져갑니다.

<div style="display: flex; border: 1px solid black;">
  <div style="background-color: lightblue; flex-grow: 1;">1</div>
  <div style="background-color: lightcoral; flex-grow: 1;">2</div>
  <div style="background-color: lightgreen; flex-grow: 2;">3</div>
</div>

아이템 순서 변경

• order 속성을 사용하여 Flex 아이템의 시각적 순서를 변경
  • order: 3: 첫 번째 아이템을 시각적으로 세 번째 위치로 이동.
  • order: 1: 두 번째 아이템을 시각적으로 첫 번째 위치로 이동.
  • order: 2: 세 번째 아이템을 시각적으로 두 번째 위치로 이동.

<div style="display: flex; border: 1px solid black;">
  <div style="background-color: lightblue; order: 3;">1</div>
  <div style="background-color: lightcoral; order: 1;">2</div>
  <div style="background-color: lightgreen; order: 2;">3</div>
</div>

flex-basis 활용

• 아이템의 초기 크기를 설정하고, 남는 공간에 따라 확장

<div style="display: flex; border: 1px solid black;">
<div style="flex-basis: 100px; flex-grow: 1; background-color: lightblue;">1</div>
<div style="flex-basis: 150px; flex-grow: 1; background-color: lightcoral;">2</div>
<div style="flex-basis: 80px; flex-grow: 2; background-color: lightgreen;">3</div>
</div>