[CSS] Flexbox - flex basis

1. flex-basis란 무엇인가?

flex-basis는 Flex 아이템이 레이아웃 계산을 시작할 때의 기준 크기입니다.
Flexbox는 아이템을 배치할 때 무작정 늘리고 줄이지 않고,
먼저 “이 아이템의 기본 크기가 얼마인가?”를 정합니다.
그때 사용하는 값이 바로 flex-basis입니다.

.item {
  flex-basis: 200px;
}

“이 아이템은 일단 200px을 차지한 상태에서 남거나 부족한 공간을 나중에 조정한다”

 

2. 왜 width가 아니라 flex-basis일까?

Flexbox에서는 주축(Main Axis) 개념이 핵심입니다.

.container {
  display: flex;
  flex-direction: row;
}

이 상태에서

• 주축: 가로
• flex-basis: 가로 기준 크기
• width: 참고값일 뿐

반대로,

flex-direction: column;

이면

• 주축: 세로
• flex-basis: 세로 기준 크기

➡️ 즉, flex-basis는 레이아웃 방향에 따라 자동으로 기준 축이 바뀌는 크기 속성입니다.
이 점 때문에 Flexbox에서는 width / height보다 더 중요합니다.

 

3. flex-basis: auto의 의미

.item {
  flex-basis: auto;
}

• 기본값
• 이 경우 width(또는 height)를 기준 크기로 사용

즉,

width: 150px;
flex-basis: auto;

결과적으로 기본 크기 = 150px

 

하지만,

flex-basis: 200px;
width: 150px;

200px이 우선 적용

 Flexbox에서는 flex-basis가 width보다 우선권을 가짐

 

4. grow · shrink와 함께 보는 전체 흐름

Flexbox의 크기 계산 순서는 다음과 같습니다.

• flex-basis로 기본 크기 결정
• 컨테이너에 공간이 남으면 → flex-grow
• 컨테이너가 좁아지면 → flex-shrink

즉,

• flex-basis → 출발선
• flex-grow → 늘리는 규칙
• flex-shrink → 줄이는 규칙

이 셋은 항상 함께 동작하는 한 세트입니다.

 

5. flex: 1이 자주 쓰이는 이유

.item {
  flex: 1;
}

이 한 줄은 사실 아래 의미입니다.

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

• 기본 크기를 0으로 시작
• 모든 아이템이 완전히 동일한 조건에서
• 남은 공간을 비율로 나눔

 그래서 카드 UI, 균등 분할 레이아웃에서 가장 많이 쓰입니다.

 

 6. 실무에서 이렇게 이해하면 편하다

• 고정된 기준이 필요하면 → flex-basis: px
• 완전 유동 레이아웃이면 → flex-basis: 0
• 기존 width를 활용하고 싶으면 → flex-basis: auto

 

7. 정리하면

• flex-basis는 Flexbox 크기 계산의 기준점
• width / height보다 우선
• grow / shrink 계산의 출발선
• 주축(Main Axis) 기준으로 동작

flex-basis는 Flexbox가 “이 아이템을 얼마부터 시작할지” 정하는 기준이다