flex 아이템 (Child) 의 속성

Child 박스에서 flex의 속성에 어떠한 값도 설정하지 않으면 자동으로 아래와 같은 기본값이 적용된다.

flex: 0 1 auto;

//기본 크기를 필요에 따라 늘리고 줄일수 있는 속성값.

flex: <grow> <shrink> <basis>

속성을 margin 이나 padding 처럼 따로 처리 할수도 있다

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

// grow 와 shrink는 단위가 없고 비율에 따라 작동한다.

 

flex-grow

>
총량을 기준으로 비율로 크기를 맞춰서 조절한다고 생각하자.

.child_grow
{	
flex: 1 1 auto;
}
.target
{
flex: 2 1 auto;
}
-------------------------------------
<div class="flex-container">
  <div class="child_grow target">Element 1</div>
  <div class="child_grow">Element 2</div>
  <div class="child_grow">Element 3</div>  
</div>


Child Element1 은 child_grow 와 target 클래스를 가지고 있고 나머지 Element 2, 3은 child_grow 클래스만 갖고있다. 

Element1의 속성값은 2, Element2,3은 각각 1을 갖고 있으므로 적용된 grow의 전체값은 (2+1+1)=4.

총량이 1이라 가정했을때 Element1는 2/4 (50%), Element2 1/4 (25%), Element3 1/4 (25%) 의 비율을 갖는다.

 

flex-basis

자식 박스의 기본 크기를 정한다. 

// basis 값을 넣을땐 flex-grow를 0으로 설정해야 200px 이상으로 늘어나지 않는다 (고정)
.testing { flex: 0 1 200px; }

// grow값이 1 이상이면 basis로 정한 크기보다 커질 수 있다.

몇가지 참고할만한 특징으로는,

* 동시에 width와 basis를 적용할때 basis가 우선시
* 콘텐츠 양 때문에 자식 박스를 초과할때는 width가 정확한 크기를 보장하지 않는다.
* basis를 사용하지 않는다는 가정하에 자식 박스를 콘텐츠가 초과하는 상황에서 width 대신 max-width를 쓸 수 있다. 

 

간혹 자식 박스끼리 똑같은 grow 값을 적용했는데 width 비율이 1:1:1이 아닐 경우가 생길 수 있다. 

박스의 기본 크기를 설정하는 flex-basis 속성값이 auto로 되어있어 일어나는 현상으로 완벽하게 딱 맞게 하고 싶으면 속성을 0 으로 맞춰야한다. 

https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg

Flexbox not giving equal width to elements