[입문] 웹 프론트 엔드 - 5주차 - flex layout

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/