CSS. flex 항목에 지정가능한 속성들

개요

수업을 듣다보니

flex: 0 0 30%; 는 반응형이 안되고

flex: 1 1 30%;는 반응형이 된다고 하셨다

 

왜지? 왜일까? 

 

그 이유를 알아보고자 한다

 

flex 구성

flex: flex-grow, flex-shrink, flex-basis;

flex는 flex-grow, flex-shrink, flex-basis가 온다고 한다

 

이 세 가지를 하나씩 알아보자

 

flex-grow

할당받는 크기를 지정한다

1이라고 하면 모두 1만큼의 공간을 지정받으나

어느 하나의 값이 2라면 걔는 1의 2배 만큼의 공간을 지정 받는다

그림으로 보여줘야 쉬울거 같다

https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow

 

flex-shrink

얼마나 축소될지 정해준다 즉, grow의 반대이다

 

flex-basis

항목의 크기를 결정한다

100px 또는 100% 또는 100vh 등 다양하게 결정할 수 있다

 

결론

flex 0 0 30%와 flex 1 1 30%가 다른 이유는

왼쪽의 경우 공간 할당을 하지 않지만, 오른쪽의 경우 공간 할당을 하기 때문이다!