드림코딩 flexbox, flexbox froggy 게임

아주 예전에는 모든 브라우저에서 호환 가능하고, 강력하게 레이아웃할 수 있게 position, float, table을 사용

=> 제약 사항이 있음. 이것을 flexbox로 해결 가능함

float의 원래 목적은 이미지와 텍스트를 어떻게 배치하느냐임

flexbox 총 2가지 이해하기

첫번째
container[box]에 적용되는 속성 값,
item에 적용할 수 있는 속성 값이 있음

container에 적용:
display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

item에 적용:
order, flex-grow, flex-shrink, flex, align-self


두번째
중심축과 반대축이 존재 [수평,수직]



*html 간단히 작성하는 법
div.container>div.item.item${$}*10 쓰고 tab키 누름

*color tool에서 색깔 선택하면 ui적으로 어떻게 보여지는지 보여줌


display:flex; 쓰면 왼쪽에서 오른쪽으로 정렬

flex-direction: row, row-reverse, column, colmn-reverse

flex-wrap: 기본값은 nowrap 한줄에 있음 / wrap 자동으로 다음줄로 넘어감 / wrap-reverse 밑에서부터 반대로 wrapping

flex-flow는 direction과 wrap을 합한 것 ex) flex-flow: column nowrap

justify-content: 아이템을 어떻게 배치할지 결정
기본값은 flex-start 왼쪽에서 오른쪽, 수직축이 중심축이면 위에서 아래 /
flex-end는 아이템의 순서는 유지하되 오른쪽 축에서 아이템 배치, direction이 column이면 밑에서 아래쪽으로 배치

column-reverse는 밑에서부터 위로 차곡차곡 쌓여졌다면
flex-end는 아이템의 열을 유지한채로 밑으로 내려만 줌

space-around, space-evenly, space-between

justify-content는 중심축에서
align-items는 반대축에서 아이템 배치하는 속성값
align-items에는 baseline이 있는데, 텍스트가 균등하게 아이템을 배치함

align-content는 반대축에서 아이템 지정
space-between은 위,아래는 딱 붙어있고 중간 아이템에 space가 들어감


중요한 것은 큰 개념을 이해하고 있느냐는 것


item 속성값들
item 각각에 flex-basis : 60%, 30%, 10% 지정해주면
늘어나거나 줄어들때 container의 width에 따라 각 퍼센트 차지
align-self로 아이템별로 지정 가능


Flexbox Froggy 게임: https://flexboxfroggy.com/

Flexbox Froggy