flex box 아리송한 것 정리

flex container의 속성들

        - flex-direction: row;(기본값) / column, row-reverse, column-reverse

        - flex-wrap: nowrap;(기본값) / wrap, wrap-reverse

        - flex-flow : row nowrap; (direction과 wrap을 한줄로 표기)

        - align-items : baseline (텍스트를 기준으로 균등하게 정렬)

        - align-content: (row라면 수직축, 즉 반대축을 기준으로 정렬) flex-wrap:wrap 일 경우 사용이 가능함

 

flex item의 속성들

        - order : 순서를 지정할 수 있음 (잘쓰진않음, 아이템의 모든 순서를 정해야 원하는대로 출력가능, order:0부터 시작)

        - flex-grow : 가로가 늘어날때 얼만큼 늘어나게 할 것이냐.  1로 지정하게 되면 100%로 채워줌, 2로 지정하면 나머지들의 2배로 100%로 채워줌

        - flex-shrink: 가로가 줄어들 때 얼만큼 줄어들게 할 것이냐. 2로 지정하면 나머지 애들보다 2배 더 작게 줄어들어라

        - flex-basis: 60%; (퍼센트로 지정)

        - align-self: item 각각을 정렬 /start, end, center

*재밌는 게임 : 마지막꺼 어려웠음 ㅋ https://flexboxfroggy.com/#ko

Flexbox Froggy