flex layout
flex layout은 CSS3 속성이며 layout을 위한 속성입니다.
유동적이며 비율이라고 생각하시면 쉽습니다.
입문 과정이라 깊게는 안다루고 간단한 방법을 다뤘습니다.
flex
를 사용하기 위해서는 감싸고 있는 컨테이너의 display
값이 flex
여야 합니다.
<style>
.container{display:flex}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
</div>
flex값은 다음과 같습니다.
.item{flex: none | 'flex-grow' 'flex-shrink' || 'flex-basis'}
- flex-grow
1부터 정수를 사용할수 있으며.
1로 설정할 경우 자식들이 1:1 비율로 적용됩니다. - flex-shrink
flex-basis
에 지정한 최소 사이즈보다 부모가 작아질 경우 숫자가 낮을수록 많은 공간을 차지하게 됩니다.
(영상에서는 높이로 잘못 설명했습니다.) - flex-basis
엘리먼트가 가질수 잇는 최소 사이즈(더이상 줄어들지 않는 사이즈) 를 지정합니다.
flex layout 게임
http://flexboxfroggy.com/
CSS trick demo
https://css-tricks.com/snippets/css/a-guide-to-flexbox/