(CSS) flexbox 3탄 : flex-grow, flex-shrink, flex-basis, flex 사용법

HTML, CSS

Znero 2024. 5. 9. 22:06

flex box 포스팅, 마지막 3탄이다.

이번 포스팅에서는 flex-grow, flex-shrink, flex-basis 사용법에 대해 다룬다.

flexbox 관련 이전 포스팅 링크는 하단에 추가하였다.

(CSS) flexbox 1탄 : justify-content, align-items, flex-direction, flex-wrap 사용법

css로 태그 크기를 이리저리 조정하다 보면 불편한 점을 금방 발견하게 된다. 컴퓨터를 기준으로 height와 weight를 설정해서 디자인하면, 모바일에서 볼 때 디자인이 이상해지는 경우가 있다. 따

lemu-devblog.tistory.com

(CSS) flexbox 2탄 : flex-flow, align-content, order 사용법

이전에 flex box에 대해 다루었다. 물론 flex box를 사용할 때 가장 많이 사용되는 것이 justify-content와 align-item이지만, 이 이외에도 사용되는 것들을 추가로 설명하고자 한다. (CSS) flexbox 1탄 : ju

lemu-devblog.tistory.com

flex-grow는 flex-box(부모) 내 flex-item(자식) 요소가 차지할 수 있는 공간 정도를 나타낸다.

기본 값은 0이다. 음수는 사용이 불가능하다.

아래 모든 div에 기본 flex-grow 값을 1을 주고, 중앙 div에만 flex-grow 값을 3을 주었다.

다른 div보다 확연히 많은 공간을 차지하는 것을 확인할 수 있다.

flex-shrink란 flex-grow와 반대로 얼마나 자식(flex item)을 얼마나 축소시킬지 지정하는 속성이다.

flex-shrink의 기본값은 1이다. 1보다 커질수록 해당 아이템은 다른 아이템보다 더 많이 축소되게 된다.

이때 중요한 건, flex-shrink 값을 0으로 주면 해당 아이템은 축소되지 않는다는 것이다.

이를 이용해 부모가 flex box이고, 자식 flex-item을 flex-box 밖으로 벗어나게 하고 싶다면

flex-shrink값을 0으로 준 뒤 부모에게 overflow 속성을 주면 된다.

(CSS) overflow가 작동하지 않을때 해결방법

overflow란? 부모 아래에 있는 자식이 부모를 넘어서게 하고 싶다고 했을 때 overflow를 사용하면 된다. overflow는 말 그대로 넘치는 콘텐츠에 대한 처리 방법이다. 이때 수평방향은 overflow-x, 수직

lemu-devblog.tistory.com

flex-basis는 자식(flex item)의 초기 크기를 지정하는 속성이다.

즉, 여유 공간이 Flexbox 컨테이너에 분배되기 전에 각 아이템이 차지하는 기본 크기를 결정한다.

지정한 flex-basis 값보다 요소 크기가 작으면, 기본 크기만큼 늘어나고

지정한 flex-basis 값보다 요소 크기가 크면, 그 크기가 유지된다. (줄어들지 않는다)

<주의점>

flex는 flex-grow, flex-shrink, flex-basis의 단축 속성이다.

값이 몇 개 인지, 들어가는 값이 무엇이냐에 따라 해당 값이 어떻게 적용되는지가 바뀐다.