9. Flexbox

Source: Dev.to

BootCamp by Dr. Angela

Display: Flex

/* example */
.container {
  display: flex;
  gap: 10px;
}

• display: flex를 적용하면, 모든 자식 요소가 기본적으로 한 줄에 배치됩니다.
• Flex 레이아웃은 자식 요소에 대해 전통적인 display 유형(inline, block, inline‑block, none)을 무시합니다.

inline-flex

• inline-block과 비슷하게 동작합니다.
• 컨테이너 자체는 인라인 요소처럼 동작합니다(예: “).
• 너비는 내용에 맞게 조정됩니다(가장 큰 자식 항목을 기준).
• 자식 요소에는 여전히 Flex 규칙이 적용됩니다.

Flex Direction

• flex-direction은 메인 축과 교차 축을 결정합니다.

  • row (기본값): 메인 축 →, 교차 축 ↓
  • column: 메인 축 ↓, 교차 축 →
  • row-reverse / column-reverse: 메인 축을 따라 시작/끝 순서를 반대로 합니다

• flex-basis

  • 메인 축을 따라 개별 Flex 아이템의 초기 크기를 정의합니다.
  • Flex 아이템에만 적용되며, Flex 컨테이너에는 적용되지 않습니다.
  • 행 방향에서는 width와, 열 방향에서는 height와 같은 역할을 합니다.

Flex Layout

• order: 0;(기본값)은 Flex 아이템에 적용됩니다; 값이 클수록 메인 축을 따라 뒤쪽(행에서는 오른쪽)에 배치됩니다.

Wrapping (flex-wrap – container)

• nowrap (기본값): 모든 아이템이 한 줄에 유지됩니다.
• wrap: 아이템이 여러 줄로 감싸집니다.
• wrap-reverse: 아이템이 반대 방향으로 감싸집니다.

Main‑axis alignment (justify-content)

flex-start | flex-end | center | space-between | space-around | space-evenly

Cross‑axis alignment (single line – align-items)

flex-start | flex-end | center | baseline | stretch

컨테이너 높이가 정의되어 있어야 합니다(예: height: 70vh). 아이템이 감싸지 않을 때 작동합니다.

Individual item alignment (align-self)

단일 Flex 아이템에 대해 align-items를 재정의합니다; 같은 값들을 사용합니다.

Cross‑axis alignment for multiple lines (align-content)

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch

flex-wrap: wrap;이 필요하며, 행이나 열 사이의 간격을 제어합니다.

Shorthand (flex-flow)

/* example */
flex-flow: row wrap;   /* equivalent to flex-direction: row; flex-wrap: wrap; */

Flex Sizing

크기 우선순위 (낮음 → 높음):
내용 크기 → width → flex-basis → min-width / max-width

Content‑based sizes

• min-content: 가장 긴 단어를 기준으로 한 최소 가능한 너비.
• max-content: 모든 내용을 한 줄에 배치했을 때의 최대 가능한 너비.

Flex Grow / Shrink

• flex-grow: 여유 공간이 있을 때 아이템이 얼마나 늘어날지를 제어합니다.
• flex-shrink: 공간이 부족할 때 아이템이 얼마나 줄어들지를 제어합니다.
• 0: 늘어나거나 줄어들지 않음.

Flex shorthand

/* example */
flex: 1 1 0; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */

공간은 grow/shrink 값에 비례하여 분배됩니다.

Further Reading

• CSS‑Tricks Flexbox Guide
• Flexbox Froggy – Practice Game