5) CSS Flex

Cutie

 

22.3.8

 

1) CSS Flex box

 - Display 태그에서 Felx를 선택 : flex를 선언해야 요소들을 유연하게 위치시킬 수 있음

 - Flex는 기본적으로 모든 요소들을 가로로 둠

 - Flex 는 부모만 가질 수 있으며, 자식들에게 적용됨

 - Justify-content : 가로로 요소들을 움직임(flex-start, flex-end, sapce-between, space-around 등)

 - Align-items : 세로로 요소들을 움직임

 - Flex-direction:coulmn : 가로로 정렬된 요소들을 세로로 바꾸는 태그. 즉 Justify-content는 가로에서 세로로,

                                  Align-items는 세로에서 가로로 방향이 바뀌게 됨.

 

Flex box를 연습하는 사이트 : https://flexboxfroggy.com/#ko

Flexbox Froggy

여기 들어가서 flex에 대한 감을 익히자!!