[CSS] flex 속성의 축약형 (내 경우엔 헤더 세 부분에서 비율 줄 때 사용함)

 

flex 축약형 속성 이해하기

flex 속성은 아래 3가지 속성을 한 번에 설정하는 축약형:

flex: flex-grow flex-shrink flex-basis;

세 가지 값의 의미

1. 첫 번째 값 (flex-grow):
   • 남는 공간을 얼마나 차지할 것인지의 비율
   • 기본값: 0 (늘어나지 않음)
   • 1 이상이면 남는 공간을 해당 비율만큼 차지
2. 두 번째 값 (flex-shrink):
   • 공간이 부족할 때 얼마나 줄어들지의 비율
   • 기본값: 1 (다른 요소와 동일하게 줄어듦)
   • 0이면 줄어들지 않음, 클수록 더 많이 줄어듦
3. 세 번째 값 (flex-basis):
   • 요소의 기본 크기
   • px, %, em 등의 단위 사용
   • auto는 요소의 원래 크기를 사용

자주 쓰는 축약 표현들

flex: 0 0 20%

• 의미:
  • 늘어나지 않고 (flex-grow: 0)
  • 줄어들지도 않고 (flex-shrink: 0)
  • 기본 너비는 20%로 고정 (flex-basis: 20%)
• 용도: 고정 너비가 필요한 요소(예: 사이드바)

flex: 1 0 auto

• 의미:
  • 남는 공간을 모두 차지 (flex-grow: 1)
  • 줄어들지 않고 (flex-shrink: 0)
  • 기본 크기는 내용물에 맞춤 (flex-basis: auto)
• 용도: 남는 공간을 모두 채워야 하는 메인 컨텐츠

flex: 0 1 auto

• 의미:
  • 늘어나지 않고 (flex-grow: 0)
  • 필요하면 줄어들고 (flex-shrink: 1)
  • 기본 크기는 내용물에 맞춤 (flex-basis: auto)
• 용도: 기본 설정값, 보통 내용물 크기를 유지하려는 요소

헤더에 많이 쓰는 패턴

  로고
  메뉴
  사용자

header {
  display: flex;
  justify-content: space-between;
}

.logo { flex: 0 0 20%; } /* 로고는 20% 고정 */
.menu { flex: 1 1 auto; } /* 메뉴는 남는 공간 다 차지 */
.user { flex: 0 0 auto; } /* 사용자 영역은 내용물 크기만큼만 */

가장 자주 쓰이는 패턴 세 가지

1. flex: 0 0 200px - 너비 고정, 늘어나지도 줄어들지도 않음
2. flex: 1 1 auto - 남는 공간을 차지, 필요시 줄어듬
3. flex: 1 0 0 - 동등하게 공간 분할, 줄어들지 않음

 

---