" Flexbox의 장점을 한 마디로 표현하면 '복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다 " - 네이버
오호~ 이렇게 편한 게 있다면 당장 알아봐야지!!
거의 모든 브라우저에서 지원을 하고 있기 때문에 열심히 공부하면 잘 적용할 수 있을 것 같다
display: -webkit-box; , display: -ms-flexbox; display: flex; 접두어를 넣어주자!
부모 영역( flex_container )에 display:flex 아니면 display:inline-flex을 주면 그 안의 div는 flex item이 된다 (간단!!)
<body>
<style type="text/css">
.flex_container {display:flex;}
</style>
<div class="flex_container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
Flex-direction - flex item의 상하좌우 방향을 설정한다
flex-direction : column || column-reverse || row || row-reverse ;
기존에 가로정렬할 때는 자식 요소에 float를 적용하였는데 부모 요소의 height가 0으로 되어버리는 경우가 있다
이를 해결하기 위해 ( 본인 )은 가상 선택자를 써서 clear 해주었었다
하지만 flex는 그러한 이슈가 없다는 것이다!! ( 좋다..! )
Flex-wrap - flex item의 위치를 줄 바꿈 할지 설정한다
flex-wrap : wrap || nowrap || wrap-reverse ;
nowrap은 default값이다
Flex-flow - flex-direction 속성과 flex-wrap 속성을 한 줄로 단축시켜 적을 수 있다
flex-flow : flex-direction flex-wrap ;
Flex-basis - flexible item의 길이를 설정한다 ( default값은 auto )
flex-basis : number || auto || initial || inherit ;
Flex-grow - flexible item의 너비를 설정한다 ( default값은 0 )
flex-grow : number || initial || inherit ;
