[CSS] flex-basis에 대해

🌈 Intro

캐러셀을 구현하면서 캐러셀 안에 들어가는 카드의 너비가 의도와 다르게 설정되는 문제가 있었다. 삽질과 ChatGPT의 도움으로 해당 문제는 flex와 관련이 있고, 그중 flex-basis에 대한 이해가 부족하다는 것을 알게 되었다. 이번 기회에 flex-basis를 비롯하여 flex-grow, flex-shrink도 함께 정리해 보았다.

📍 flex-grow

flex container의 남은 공간의 할당 비율이다.

📍 flex-shrink

flex item들의 크기의 합이 flex container보다 클 경우, flex item의 축소 비율이다. 즉, 값이 클수록 flex item의 크기가 더 많이 줄어든다.

📍 flex-basis

flex item의 초기 크기이다. 3가지의 특징이 있다.

• 주축이 기준: flex-basis는 flex-direction: row일 경우 width, flex-direction: column일 경우 height를 의미한다.
• width/height보다 우선: width/height와 flex-basis가 모두 적용된 경우 flex-basis가 적용된다. 단, flex-basis: auto일 경우에는 width/height가 적용된다.
• 최종 크기를 의미하지 않음: flex-basis는 flex-item의 초기 크기를 설정하는 요소이다. 이후 flex-grow와 flex-shrink 값에 따라 flex item의 최종 크기가 결정된다.

📍 flex

아래처럼 축약하여 쓸 수 있다.

flex: flex-grow flex-shrink flex-basis

References

🔗 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
🔗 https://velog.io/@jiseong/CSS-flex-basis%EC%99%80-width#5-flex-basis-width-flex-shrink-1
🔗 https://blogpack.tistory.com/863