Modern CSS에서 Flexbox를 제대로 이해하기

― float 해킹부터 flex 실무 패턴까지

프론트엔드 면접이나 실무에서 이런 질문을 자주 듣습니다.

• “Flexbox 기본 방향은 뭐죠?”

• “flex: 1은 정확히 무슨 뜻인가요?”

• “flex-shrink는 0이랑 1만 쓰는 건가요?”

• “flex-basis: auto랑 100%는 같은가요?”

이 글은 Flexbox를 ‘계산 공식’이 아니라 ‘실무 도구’로 이해하기 위한 정리입니다.
특히 Modern CSS 관점에서 Flex를 어떻게 쓰는지에 초점을 맞췄습니다.

---

1. Modern CSS란 무엇인가?

먼저 용어부터 정리해야 합니다.

Modern CSS는 새로운 CSS가 아니다.
최신 브라우저 환경을 전제로 한 CSS 사용 패러다임이다.

CSS 문법 자체는 동일하지만,

• float, clearfix 같은 우회 기법

• 레이아웃을 JS로 보완하던 방식

대신에

• Flexbox

• Grid

• CSS Variables

• Container Query

같은 공식 표준 기능을 적극 활용하는 흐름을 보통 Modern CSS라고 부릅니다.

---

2. 왜 float 해킹이 사라졌는가?

과거에는 레이아웃을 만들 도구가 거의 없었습니다.

float의 원래 목적

img {
  float: left;
}

→ 텍스트가 이미지를 감싸도록 하기 위함

하지만 레이아웃 도구가 없던 시절,
float는 가로 배치를 위한 유일한 선택지였습니다.

그 결과 생긴 것이:

• clearfix

• overflow: hidden

• 가짜 div

• height 붕괴 문제

이런 것들을 통틀어 float 해킹이라고 부릅니다.

Flexbox와 Grid는
“레이아웃을 위한 공식 도구”로
이런 해킹을 완전히 대체했습니다.

---

3. Flexbox 레이아웃과 Flex 레이아웃은 같은가?

같습니다.

• Flexbox

• Flex 레이아웃

• CSS Flexible Box Layout

모두 같은 의미이고,
실무에서는 그냥 “flex”라고 부릅니다.

.container {
  display: flex;
}

이 한 줄이 바로 Flexbox의 시작입니다.

---

4. Flexbox의 기본 방향은?

기본값은 가로(row) 입니다.

.container {
  display: flex;
  /* flex-direction: row; (기본값) */
}

그래서:

• justify-content → 가로 정렬처럼 보이고

• align-items → 세로 정렬처럼 보입니다

이걸 헷갈리면 Flexbox는 계속 헷갈립니다.

---

5. justify-content: space-between은 어떤 정렬인가?

한 문장으로 정리하면 이렇습니다.

첫 요소는 시작점, 마지막 요소는 끝점에 붙고
나머지는 그 사이 간격이 동일하게 배치된다

.container {
  display: flex;
  justify-content: space-between;
}

특징:

• 양 끝에는 여백 없음

• 아이템 사이 간격만 분배

• 아이템이 1개면 효과 없음

실무에서는 헤더, 툴바에 자주 쓰지만
한 요소만 밀 때는 margin-left: auto가 더 안정적입니다.

---

6. flex: 1 은 무슨 뜻인가?

이건 축약형입니다.

flex: 1;

은 실제로 다음을 의미합니다.

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

핵심 포인트는 이것입니다.

“기존 크기는 무시하고
남는 공간을 비율로 나누겠다”

그래서 flex: 1을 쓰면
모든 아이템이 균등한 크기를 갖게 됩니다.

---

7. flex 속성에서 실제로 중요한 것들

flex-grow

• 남는 공간을 얼마나 가져갈지

flex-shrink

• 공간이 부족할 때 얼마나 줄어들지

flex-basis

• flex 계산의 기준 크기

이 중에서 실무에서 가장 오해가 많은 게 flex-shrink와 flex-basis입니다.

---

8. flex-shrink는 0 또는 1만 쓰는가?

사실상 그렇습니다.

이론적으로는:

flex-shrink: 0;
flex-shrink: 1;
flex-shrink: 2;
flex-shrink: 10;

모두 가능합니다.

하지만 실무에서는 이렇게 씁니다.

flex-shrink: 0; /* 절대 줄면 안 됨 */
flex-shrink: 1; /* 기본 */

실무에서는 px 단위 계산을 하지 않는다.
“줄어도 되는가 / 안 되는가”만 표현한다.

---

9. flex-shrink 비율 계산은 실제로 쓰이나?

예를 들어:

• A: shrink 1

• B: shrink 2

• 부족 공간: 30px

이라면,
기준 크기(flex-basis)가 같을 때는

• A → 10px

• B → 20px

으로 줄어드는 게 맞습니다.

하지만 실무에서는 이런 계산을 하지 않습니다.

계산은 브라우저가 하고
개발자는 우선순위만 표현합니다.

---

10. flex-basis: auto 는 무슨 의미인가?

“이 요소의 기준 크기를
width 또는 콘텐츠 크기에서 가져와라”

flex-basis: auto; /* 기본값 */

• width가 있으면 그 값

• 없으면 콘텐츠 크기

그래서:

flex: auto;

는

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

를 의미합니다.

---

11. auto와 100%는 같은가?

절대 아닙니다.

특히 Flexbox 안에서는:

• auto → 안전

• 100% → 의도 충돌 가능성 큼

---

12. flex-basis: 100%는 실무에서 쓰나?

거의 안 씁니다.

예외는 딱 하나입니다.

.container {
  display: flex;
  flex-wrap: wrap;
}

.full {
  flex-basis: 100%;
}

“이 아이템은 한 줄을 통째로 차지해라”

이 목적 외에는 거의 등장하지 않습니다.

---

13. flex-wrap은 무엇인가?

아이템을 한 줄로 유지할지,
공간이 부족하면 줄바꿈할지를 정하는 속성

flex-wrap: nowrap; /* 기본값 */
flex-wrap: wrap;

• 헤더 / 툴바 → nowrap

• 카드 / 태그 리스트 → wrap

wrap을 쓰면:

• justify-content는 각 줄 기준

• 여러 줄 전체 정렬은 align-content

---

14. 실무에서 실제로 쓰이는 flex 조합들

⭐ 가장 많이 쓰는 패턴

.container {
  display: flex;
}

.icon {
  flex-shrink: 0;
}

.content {
  flex: 1;
  min-width: 0;
}

이 조합 하나로:

• 아이콘 고정

• 텍스트 줄어듦

• 말줄임 정상

---

자주 쓰는 flex 축약 패턴

flex: 1;      /* 균등 분배 */
flex: auto;   /* 고유 크기 존중 */
flex: none;   /* 완전 고정 */

이 세 개로 실무 90% 해결됩니다.

---

15. Flexbox 실무 요약

• Flex는 계산 도구가 아니다

• 의도 표현 도구다

• 0 / 1 / auto / none만 잘 써도 충분

• min-width: 0은 필수급

• px 단위 shrink 계산 ❌

---

마무리 한 문장

Flexbox를 잘 쓴다는 것은
계산 공식을 외우는 게 아니라,
UI 요소의 역할과 우선순위를 정확히 표현하는 것이다.

---

🧾 작성 참고

이 글은 ChatGPT의 도움을 받아 내용을 정리하였습니다.