flex:1;
이번에 네이버 구매하기 클론 코딩 강의를 들으면서 무수히도 많이 쓰이던 flex 속성, 그 중에서도 개린이이 나에게 다소 신박했고 실무에서 엄청나게 많이 쓰인다는 flex:1; 에 대해서 정리하고자 한다.
flex라는 속성은 flex-grow, flex-shrink, flex-basis를 속성값으로 가지는 단축속성(shorthand)이다.
우선, 각각 개별 속성에 대해서 알아보자.
✔️ flex-grow
컨테이너에서 할당 가능한 남는 공간이 있다면 그 공간을 얼마나 차지할 지 선언하는 flex item(요소)의 속성값이다.
- flex-grow: 0; (기본값) === 요소를 늘리지 말아라! (요소 크기 유지)
- flex-grow:1; === 남는 공간을 나눠서 할당한다.
- flex-wrap: wrap; 이 적용되어 있을 때는 아랫줄로 간 아이템들끼리 알아서 공간의 할당량을 나누게 된다.
형제 관계인 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받는다.
만약 flex-item이 갖는 flex-grow 값이 다르다면 그 숫자의 비율에 따라 남는 공간이 할당된다.
✔️ flex-shrink
grow와 반대로 요소의 크기가 얼마나 줄어들지, 각 요소의 줄어드는 정도를 선언하는 속성값이다.
flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 사용한다. (즉, 요소가 container에 넘칠 때)
- flex-shrink:1; (기본값) === 컨테이너가 줄어들 때 자리가 부족하다면 동일한 비율로 줄어들게 된다.
- flex-shirink:0; === 원래 요소의 크기를 유지해라! (줄이지 마!)
만약 flex-item이 갖는 flex-shrink 값이 다르다면 grow와 마찬가지의 원리로 그 값만큼 다른 비율로 줄어들게 된다.
✔️ flex-basis
플렉스 아이템의 초기 크기를 지정한다.
따로 지정하지 않는다면, 요소 자체의 원래의 너비값을 갖게 된다.
flex-basis값을 지정해 줌으로서 grow와 shrink가 적용되는 공간의 크기를 지정할 수 있게 된다.
- flex: auto; (기본값) === 컨텐츠의 너비만큼을 의미
만약, 모든 요소의 flex-basis 값을 동일하게 설정한다면 동일한 비율의 grow값을 주면 모두 같은 비율로 늘어나게 된다.
flex-basis:0;
flex-basis:0; 즉, 요소들의 너비가 없다고 선언함으로서, 요소들의 가로길이 그 자체가 grow로 인한 비율로 늘어나게 된다.
✔️ flex
shorthand
하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성.
flex-grow, flex-shrink, flex-basis 들의 단축 속성.
shorthand는 작성하지 않으면 initial 값을 적용하지만, flex는 flex-basis값이 기본값으로 적용되지 않기때문에 주의해야한다.
그렇다면 flex:1; 의 의미는?
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%
즉, flex-basis가 0이므로 점유 크기를 0으로 만든 후 화면 비율에 따라 유연하게 늘어나거나 줄어들 수 있음을 만드는 속성이다.
💡 적용 사례)
위의 체크박스와 같이 동일한 비율로 컨테이너에 요소를 할당시킬 때 자주 사용된다.
