[CSS] flex: 1이란

flex: 1을 사용할 때마다 헷갈려가지고 매번 구글에 검색하였다.

이 의미에 대해 확실히 이해하고자 쓴다!

 

flex

---

flex-grow, flex-shrink, flex-basis를 한 번에 사용하는 단축 속성

 

 

 

 

flex: 1 === flex: 1 1 === flex: 1 1 0

---

flex: 1은 flex: 1 1, flex: 1 1 0과 같다.

즉, 아래와 같다.

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

 

 

flex-grow

[기본값] flex-grow: 0; 

0 : 부모의 너비가 남을 경우에도 해당 아이템의 기본 너비를 유지한다.

1 :  부모의 너비가 남을 경우 너비를 채운다.

 

flex-shrink

[기본값] flex-grow: 1

0 : 부모의 너비가 해당 아이템보다 작아져도 크기가 줄어들지 않는다.

1 : 부모의 너비가 해당 아이템보다 작아지면 부모의 너비에 맞추어 줄어든다.

 

flex-basis

[기본값] flex-basis: auto (컨텐츠 너비를 뜻함)

해당 아이템의 기본 너비를 지정한다.

0 : 해당 아이템이 부모의 너비에 따라 결정하게 된다.

 

 

 

 

따라서 flex: 1은

---

flex-basis가 0이니까 부모의 너비에 맞추게 된다.

따라서 부모의 너비가 남을 경우 그 공간을 채우고, 부모가 해당 아이템의 너비보다 작아졌을 때 줄어들게 된다.

 

 

 

flex는

• flex-grow를 제외한 속성을 생략할 수 있다.
• flex에서 flex-basis를 생략하면 0이 된다.
• px,% 등 단위를 적으면 flex-basis에 적용된다.

 

 

따라서 flex: 1은 flex-grow: 1인데 flex-basis의 값을 생략하였으니 그 값은 0이 되어 아래와 같은 결과를 같게 된다.

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