잘 몰랐던 스타일 속성, flex:1 살펴보기

그동안 미뤄두었던 스타일 속성, flex:1을 알아보자.

inline-flex

먼저 inline-flex는 이전 글에서도 알아봤었다.
하지만 내용을 다시 읽어보니, 오해의 여지가 있는 설명이라 정정하고자 한다.

• inline-flex는 flex 컨테이너를 인라인 레벨 요소처럼 동작하게 하며, 내부 아이템은 flex 레이아웃을 유지한다.
• 즉, 아이템이 컨텐츠의 크기에 맞게 줄어들고, 컨텐츠의 크기에 맞게 늘어난다.

그래서 다시 이전 글의 예시를 가져와서 확인해보면 다음과 같다.

• flex에서 inline-flex로 변경되면 flex의 아이템 배치가 수직에서 수평으로 바뀌는 것이 아니다.
• flex 컨테이너 자체의 배치가 수직에서 수평으로 바뀌는 것이다.

flex:1

flex: 1;

flex:1은 사실 다음과 같은 세부 속성을 가지고 있다.

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

그럼 여기서 flex-grow, flex-shrink, flex-basis는 뭘까..?

flex-basis

flex-basis는 아이템의 기본 크기를 설정해준다.

• flex-basis가 auto일 때는 아이템의 너비는 width 속성에 의해 결정된다.
• flex-basis가 auto이고, width가 설정되어 있지 않다면 아이템은 컨텐츠의 크기이다.
• width와 flex-basis가 모두 설정되어있다면, flex-basis가 우선시된다.
• flex-basis가 0%일 때는 콘텐츠 크기를 무시하고 flex-grow 비율에 따라 아이템의 크기를 결정한다.

flex-grow

flex-grow는 container를 기준으로 아이템의 크기를 비율로 늘리는 속성이다.

• flex-basis가 설정되었다면, container의 너비에서 flex-basis를 뺀 나머지 너비를 아이템이 비율로 나눠서 가진다.

예를들어 다음과 같이 적용해보자.

.item1 {
  flex-grow: 0;
  flex-basis: 40px;
}

.item2 {
  flex-grow: 1;
}

.item3 {
  flex-grow: 1;
}

container의 전체 너비를 기준으로 아이템 1의 40px를 뺀 나머지 너비를 아이템 2와 아이템 3가 비율로 나눠서 가진다.

flex-shrink

flex-shrink는 flex-grow와 반대로 아이템의 크기를 줄이는 속성이다.

• flex-shrink가 0일 때는 아이템의 크기가 줄어들지 않는다.
• flex-shrink가 1이상 일 때는 아이템의 크기가 줄어든다.
  • flex-shrink가 2일 경우, 기본 크기(flex-basis)가 동일한 다른 아이템보다 2배 더 많이 줄어든다.

예시의 세 아이템은 flex-shrink가 0일 때는 아이템이 축소되지 않아 컨테이너 너비를 초과하고 , 1 이상일 때는 아이템이 축소되어 컨테이너 너비 내에 맞춰진다.

이제 다시 돌아와서 flex:1을 살펴보자. 위에서 언급했듯이, flex는 flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 속성이다.

• flex-basis의 default는 auto이다.
  • 단, 축약형에서 flex-basis가 생략되었을 경우, flex-basis는 0이 적용된다.
• flex는 padding의 영향을 받는다.
  • 즉, padding값에 따라 flex-basis에서 설정한 값과 일치하지 않을 수 있다.

참고자료

이번에야말로 CSS Flex를 익혀보자
CSS Flex 완벽 가이드