css_flexbox

flex (원하는 만큼 만들어 낼 있다)
1. 자식 엘리먼트를 움직이려면 부모 엘리먼트를 flex container로 만들어야 함.
-> ex body 아래 div가 있다면 body 태그에 display : flex 해주어야 함
   그 아래 원하는 속성 추가 
   - justify-content ; space-between, center 등 빈공간을 줄 지 속성 지정가능

2. justify-content는 주축(main axis 수평)
align-item는 교차축(cross aixs)로 움직인다

주축과 교차축을 설정하는 것 : flex-direction  (row가 default)
flex-direction : column 이면 주축과 교차축의 수직 수평이 뒤바뀐다.

column reverse, row-reverse 등 다양한 요소 있음 

vs = view point height
viewport = screen

3. flex-warp:wrap 화면의 크기에 들어가는 만큼만 들어가고 개행 되도록
wrap-reverse 순서 거꾸로 진행

 

 

 

flex 게임 : https://flexboxfroggy.com/#ko