[CSS] Flexbox (2) - 아이템 속성과 실전 갤러리 정렬

이번 포스팅에서는 [최신 레이아웃] 파트의 세부 주제인 Flex 아이템의 수축과 팽창에 대하여 상세히 알아보겠습니다.

1. flex-grow, shrink, basis의 완벽한 이해

Flex 컨테이너 내부의 자식 요소들은 남는 공간을 어떻게 나눠 가질지, 혹은 모자란 공간을 어떻게 줄일지 결정해야 합니다. 이 3가지 속성을 단축 속성 flex: 1 1 auto;처럼 씁니다.

• flex-basis: 요소의 기본 크기(주축 방향)를 정합니다. 보통 auto나 0으로 둡니다.
• flex-grow: 남는 여백을 가져가는 비율입니다. 형제 요소들이 1과 2를 가지면, 1:2의 비율로 여백을 나눠 가집니다.
• flex-shrink: 공간이 모자랄 때 자신의 크기를 줄이는 비율입니다. 0으로 설정하면 아무리 화면이 줄어도 본래 크기를 절대 유지합니다!

2. 실전 노하우: 가변적인 텍스트 입력창 만들기

검색창에서 검색 버튼은 크기가 고정되어 있고, 입력 필드(Input)는 남은 화면을 꽉 채우도록 만들 때 Flexbox가 최고의 선택입니다.

.search-bar {
  display: flex;
}
.search-input {
  flex-grow: 1; /* 남는 공간을 100% 독차지합니다 */
  /* flex-shrink: 1 (기본값) 이므로 화면이 좁아지면 유연하게 줄어듭니다 */
}
.search-button {
  flex-shrink: 0; /* 화면이 아무리 좁아져도 버튼 크기는 절대 줄어들지 않음! */
  width: 80px;
}

---

지금까지 Flexbox 아이템의 크기 조절 노하우에 대해 살펴보았습니다. flex-shrink: 0은 이미지나 버튼의 찌그러짐을 방지하는 실무 필수 팁입니다.