[css] flex-grow, flex-basis, flex-shrink란?

flex-basis란?

 - 플렉스 아이템의 초기 크기를 지정한다.

 * box-sizing을 따로 지정하지않는다면 콘텐츠 박스의 크기를 변경한다.

 

div의 텍스트의 길이가 다르기 때문에 width이 다른 걸 볼 수 있다.

 

flex-grow

 : 부모 요소가 flexbox 일때, 그 안에 속한 flex 아이템들이 기본 크기 보다 더 커질수 있는지 결정하고, 플렉스 박스 내부에서 할당 받을 수 있는 공간을 상대적으로 정의하는 속성이다.

 쉬운 말로 flwx-grow::1를 하면 width가 다 꽉차면서 각 요소의 값들이 늘어난다.

 * 남은 공간이 있을 때만 사용이 가능하다.

 

만약에 1을 준다면 1 : 1 :1 로 크기를 나눠갖게 된다. 

 

이떄! flex-basis가 0이 되면 동일한 크기를 줄 수 있다.

 

 

첫번쨰 itme에 1을 주고 두 번쨰 item에 2를 줘서 1 2 0싹 나눠먹은 걸 볼 수 있다.

 

* 주의 사항

 :  flex-basis의 초기값은 auto인데 만약에 한 개 또는 두개의 단위 없는 숫자를 사용시에  0이 된다.

    flex-basis: 1, 2이면 flex: 1, 2, auto; 가 아니라 flex: 1, 2, 0이 된다.

 

 

flex-shrink

 : flex-item 요소의 크기가 flex-container 요소의 크기보다 클때 사용한다.

   설정값에 따라 flex-container 요소 내부에서 flex-item 요소 크기가 축소된다.

 

 width를 200px 주었는대 화면의 크기를 줄리니 width도 같이 줄는 것는 확인 할 수 있다.

왜냐하면 flex-shink의 초기값은 1이기 때문이다. 

 

 

첫 번째에만 flex-shrink:0을 주면 첫 번쨔만 200px를 유지하는 것을 볼 수 있다. 

 

 

값이 하나일 때

 1) number를 쓰면 flex-grow와 같다. 

      flex: 1; === flex-grow : 1; 

 

2) length 또는 percentage를 지정하면 glex-bassis와 같다 

    flex: 50px; === flex-basis: 50px;

     flex: 50% === flex-basie: 50%;

 

3) none, auto, initial

   flex;initial 

   :  아이템 크기가 각각의 width와 height 속성에 따라 정해진다.

      남은 공간을 채우려 늘어나지 않으며 flex: 0 1 auto; 같다

 

flex: auto;

 : 아이템 크기가 각각의 width와 height 속성에 따라 정해진다.

   남은 공간을 채우기 위해 늘어 날 수도 있으며 flex: 1 1 auto와 같다.

 

flex:none;

 :  아이템 크기가 각각의 width와 height 속성에 따라 정해진다.

    컨테이너 크기와 관계 없이 변하지 않으며 flex: 0 0 auto와 같다. 

 

2. 값이 두 개 일 때

 1) 첫 번째 값은 number이여야 하고 두 번째 값은 length 또는 percentage, auto이여야 한다.

  number 사용 시에 flex-shrink

 flex: 1 1;

  length 또는 percentage, auto 사용 시 flex-bassis

  flex: 1 auto;

 

값이 세 개일 때

 1) flex-grow은 number => flex 아이템이 늘어나는 비율 지정

 2) flex-shrink은 number => flex 아이템이 줄여드는 비율 지정

 3) flex-basis은 length, percentage, auto ; => flex 아이템의 기본 크기를 지정

=> flex: 2 1 300px; 2는 flex-grow 값, 1는 flex-shrink 값 300px는 flex-basis 값이다.