flex-basis

부모 컨테이너(flex 지정) 안 자식 요소 프로퍼티로 flex-basis는 flex-grow와 flex-shrink 조합에 따라 여러 의미를 갖는다. flex-grow가 자식 요소간의 비율 및 커지는 속도를 결정했고 flex-shrink가 화면 크기를 줄일 때 줄어드는 속도를 결정했다. 특히 flex-grow가 0으로 쓸 경우 더이상 커지길 원치 않는다라는 의미로 쓰이고 flex-shrink가 0으로 쓸 경우 더이상 줄어들기 원치 않는다의 의미로 쓰인다.

 

flex-grow를 양수로 주고 flex-shrink를 0으로 줄 경우 더이상 줄어들기 원치 않음을 의미하므로 flex-basis의 의미가 mini-width 의미로 쓰인다. 최소의 가로 크기(초기값) 의미로 사용한다. 반대의 경우 flex-grow를 0으로 주고 flex-shrink를 양수로 줄 경우 더이상 커지기를 원치 않는다. 이때 flex-basis max-widhth 의미로 쓰인다.

 

flex 속성은 flex-grow | flex-shrink | flex-basis를 모두 포함하므로 flex 속성을 통해서 특정 자식에 지정하면 된다. 예를 들어보자. flex 1 0 500px; 커지길 원한다 줄어들기를 원하지 않는다. 시작 가로 크기의 초기값(최소값)은 500px 이다. flex 0 1 500px; 커지길 원하지 않는다 줄어들기를 원한다 최대로 커질 수 있는 가로 크기는 500px로 해당 가로 크기를 넘지 않는다.

 

마지막으로 중요한 점은 flex-basis와 width가 다른 점은 주축이 x축 또는 y축이 될 수 있다. 부모의 flex-direction이 row이면 앞써 적은 것 처럼 row가 되고 flex-direction이 column이 되면 y축을 기준으로 적용된다. 그러면 min-height max-height 의미로 쓰인다.