HTML5 CSS3 홈페이지 스타일링 3 - 레이아웃속성 플렉스 flex

display: flex; //화면 전체 너비를 기준으로 하여 비율에 맞춰 플렉스 아이템들을 배분합니다.

 

flex 속성을 사용한 레이아웃 모델을 플렉스 박스 레이아웃이라고 합니다. 

<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>

 

유연하게 배치할 요소의 부모 요소(플렉스 컨테이너)에 display 값을 flex로 정합니다. 자식 요소는 플렉스 아이템이라고 합니다.

 

display: inline-flex; // 플렉스 아이템의 크기를 지정하지 않은 경우 플렉스 아이템의 내용 만큼 너비가 지정됩니다.

 

정렬 기준 속성은 flex-direction으로

 

flex-direction: row; // 가로축으로 정렬
flex-direction : column; //세로축으로 정렬
flex-direction: row-reverse; //가로축 역순으로 정렬
flex-direction: column-reverse; //세로축 역순으로 정렬

 

flex-wrap 속성을 사용하면 여러행으로 정렬할 수 있습니다.

flex-wrap: wrap; //플렉스 아이템의 크기에 맞춰 줄바꿈이 됩니다.
flex-wrap: no-wrap; //플렉스 컨테이너에 맞춰 플렉스 아이템 크기가 줄어듭니다.