[CSS]flex/flex-basis, flex-gorw, flex-shrink

<!-- html -->
<section>
  <article>flex box1</article>
  <article>flex box2</article>
  <article>flex box3</article>
  <article>flex box4</article>
  <article>flex box5</article>
  <article>flex box6</article>
</section>

/* css */
section{
    display:flex;
    width:100%;
    padding:20px;
    background:lightcyan;
}
article{
    flex-basis:auto;
    padding:10px 0;
    font-size:16px;
    text-align:center;  
    background:pink;
    border:1px solid #000;
    box-sizing:border-box;
}

flex-basis

Flex Item의 크기를 설정한다.

이 때, flex-direction:row인 경우에는 아이템의 좌우 너비가 변하고, flex-direction:column;인 경우에는 아이템의 높이가 변한다.

article:nth-of-type(1){
    flex-basis:200px;
}

flex-grow

남는 행 여백을 분배하여 채우는 속성
flex-grow를 사용하면 부모 요소에 남아있는 여백이 자식요소(아이템)으로 꽉 차게 되고,
flex-grow에 작성한 비율만큼 차게 된다.
입력하지 않을 경우, flex-grow:0; 값을 가지게 된다.

article:nth-of-type(1){flex-grow:1;}
article:nth-of-type(2){flex-grow:2;}
article:nth-of-type(3){flex-grow:3;}
article:nth-of-type(4){flex-grow:1;}
article:nth-of-type(5){flex-grow:0;}
article:nth-of-type(6){flex-grow:0;}

flex-shrink

flex-shrink 속성에 0으로 설정하지 않는다면 내부 컨텐츠에 따라 유연한 크기를 갖는다.

만약, 부모요소에 flex-wrap:wrap; 속성을 부여한 경우, flex-shrink 속성이 적용되지 않는다.

article{
    flex-basis:200px;
    padding:20px;
    font-size:16px;
    text-align:center;  
    background:pink;
    border:1px solid #000;
    box-sizing:border-box;
    flex-shrink:0;
}

<article>에 flex-shrink:0;을 주어서 flex box의 크기가 화면이 줄어들어도 함께 줄어들지 않도록 했다.