공삼
article thumbnail
(HTML/CSS)Flex-grow, Flex-shrink, Flex-basis 에 대해 알아보기
Front-End/HTML-CSS 2022. 12. 15. 16:41

Flex-basis basis는 Flex로 구성된 박스의 크기를 설정하는 최소 단위이다. 쉽게말해 기본적으로 크기를 정해주고 만약 내용이 그 크기를 넘는다면 자연스럽게 늘어나게 된다. 아래의 이미지는 예시로 flex-basis를 이용하여 박스의 크기를 키워본 이미지이다. width는 임의로 설정한 item의 기본값 Flex-grow grow는 basis 의 값보다 커질 수 있는지를 지정한다. grow 에 1을 세팅한 경우 1을 설정했을 때 부모요소에 맞춰 크기가 설정된다. 0을 설정하면 부모요소의 너비만큼 기본값을 가지고 나머지 박스들이 크기를 나눠가지게 된다. 1이상의 값들을 설정하면 크기를 비율로 나눠가진다고 생각하면 쉽다. Flex-shrink shrink 는 grow와 반대라고 생각하면 쉽다. b..