[1주차] 💻🏃‍♂️ - Flexbox (자식요소 속성)

✍️ 자식 요소에 적용해야 하는 Flexbox 속성

 

flex 속성의 값

flex 속성에는 세 가지 값을 지정해줄 수 있습니다. 각 값이 의미하는 것은 다음과 같습니다.

 

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다.

flex: 0 1 auto;

순서와 기본값은 반드시 기억해주세요.  flex: grow shrink basis, flex: 0 1 auto

 

1. grow: 자식 박스는 얼마나 늘어날 수 있을까요?

grow(팽창 지수) 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미한다고 했습니다.

 

flex 속성을 설정하기 전의 모습입니다. grow 의 기본 값인 0은 빈 공간이 있어도 늘어나지 않음을 의미합니다.

우선 box1만 flex-grow : 1 로 설정해보겠습니다.

이번에는 box2도 flex-grow : 1 로 설정해보겠습니다.

box3도 flex-grow : 1 로 설정해보겠습니다. 세 박스 모두 flex-grow : 1 인 상태입니다.

 

2. shrink : 자식 박스는 얼마나 줄어들 수 있을까요?

 

shrink(수축 지수)는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아집니다. 비율이 클수록 더 많이 줄어드는 것이죠. 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다.

 

flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.

 

3. basis : 이 박스의 기본 크기는 얼마일까요?

basis(기본 크기) 는 자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기입니다. flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지됩니다.

 

grow 는 0 : 1 : 1 로 설정하고, box1에 flex-basis : 50px 로 설정해보겠습니다.

box1의 크기가 늘어나거나 줄어들지 않고 50픽셀을 유지하는 것을 확인할 수 있습니다.

 

flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지됩니다.

display 속성에 flex 가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라,

basis 로 설정된 크기가 항상 유지되는 것은 아닙니다.