코코아 클론 챌린지 6일차

배울점, 기억할 점

 

inline-block는 별로... 

flexbox 사용 규칙

1. 자식 엘리멘트에는 어떤 것도 적지않는다.
자식을 움직이려면 부모를 flex container로 만든다. 부모를 display : flex; 로 만든다.

2. main axis cross axis
x축이 주축, y축이 교차축.
justify-content는 주축에 적용.
align-items는 교차축에 적용.
vh : viewport height 100vh는 100% vh. 창에 꽉 차게. 화면의 크기가 달라도 동일하게.

3. justify-content는 주축에 적용.
align-items는 교차축에 적용.
이걸 바꿀 수 있다. 
flex 했을 때, 디폴트는 row.
flex-direction: column 을 했을 때, 주축은 수직, 교차축은 수평이 된다. 
div안의 글씨를 정렬하고 싶으면 부모 엘리먼트인 div에 display: flex; 하기

 

flexbox 익히는 게임

https://flexboxfroggy.com/#ko  

Flexbox Froggy