<!-- 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 Item
의 크기를 설정한다.
이 때, flex-direction:row
인 경우에는 아이템의 좌우 너비가 변하고, flex-direction:column;
인 경우에는 아이템의 높이가 변한다.
article:nth-of-type(1){
flex-basis:200px;
}
남는 행 여백을 분배하여 채우는 속성
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
속성에 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
의 크기가 화면이 줄어들어도 함께 줄어들지 않도록 했다.