Flex 아이템 크기 조절의 기본: flex 속성

이번 글에서는 flex 속성의 구성 요소(flex-grow, flex-shrink, flex-basis)를 이해하고, 실제로 아이템 크기를 유연하게 조절하는 방법을 알아봅니다.

---

1. flex 속성의 구성과 기본값

/* flex  shorthand = flex-grow | flex-shrink | flex-basis */
.element {
  /* 기본값 */
  flex-grow: 0;    /* 공간이 남아도 늘어나지 않음 */
  flex-shrink: 1;  /* 공간이 부족하면 줄어들 수 있음 */
  flex-basis: auto;/* 콘텐츠 크기 기반으로 기본 크기 결정 */
}

• flex-grow: 남는 공간을 얼마나 나눠 가질지 결정 (0‒∞)
• flex-shrink: 공간 부족 시 얼마나 줄어들지 결정 (0‒∞)
• flex-basis: 아이템의 초기 크기(주로 너비) 지정 (auto, px, % 등)

---

2. flex-basis로 너비 지정하기

• width 대신 flex-basis를 사용하면,
  • “추천” 크기를 제안하되
  • 콘텐츠가 더 크면 넘치며
  • 공간이 부족하면 flex-shrink에 따라 줄어듭니다.

.item {
  flex: 0 1 100px; /* grow:0, shrink:1, basis:100px */
}

예시: basis: 200px로 설정하고 shrink: 1일 때,
컨테이너에 공간이 부족하면 200px보다 작아지며 콘텐츠에 맞춰 축소됩니다.

---

3. 공간 부족 시 축소: flex-shrink

• 기본값 1 → 필요 시 자유롭게 줄어듦
• 0으로 설정하면 절대 축소하지 않아, 컨테이너 밖으로 넘칠 수 있음

/* 축소 비허용 */
.item {
  flex-shrink: 0;
  flex-basis: 200px;
}

---

4. 남는 공간 채우기: flex-grow

• 기본값 0 → 남은 공간을 채우지 않음
• 1 이상 → 지정 비율만큼 남은 공간을 분배받음

/* 모든 아이템이 남는 공간 골고루 분배 */
.item {
  flex-grow: 1;
}

• 단일 아이템만 성장→ 첫 번째 아이템만 컨테이너의 남는 공간을 모두 차지

.item-first {
  flex: 1;  /* 나머지는 flex: 0 */
}

• 비율 조정

.item-wide {
  flex-grow: 2; /* 다른(1)보다 2배 더 많은 공간 할당 */
}

---

5. 최선의 사용법: 단축 속성 flex

• 실전에서는 개별 속성 대신 반드시 flex 단축 속성 사용
• 예시: flex: 1; ↔︎ flex-grow:1; flex-shrink:1; flex-basis:0;

/* 권장 */
.item {
  flex: 1;       /* grow:1, shrink:1, basis:0 */
}
/* basis + shrink만 변경 시 */
.item-fixed {
  flex: 0 0 200px; /* grow:0, shrink:0, basis:200px */
}

 

---

마무리

• flex-basis: 콘텐츠 기반 추천 크기
• flex-shrink: 축소 허용 여부
• flex-grow: 성장 비율
• flex 단축 속성 사용으로 코드 간결화

처음엔 복잡해 보여도, 큰 프로젝트에서 실제로 활용하며 익숙해지면 Flexbox를 통해 유연하고 유지 보수성 높은 레이아웃을 손쉽게 다룰 수 있습니다.