[CSS] Flexbox, Media Queries recap

display에서 inline-blcck의 활용상 문제로 Flexbox를 고안했다.
자유롭게 box를 둘 수 있다.
flexbox는 이름자체가 flexibe이다 2차원 레이아웃에서 잘 작동한다.

1) 부모 엘리먼트에만 명시해야한다.
나중에 이해하게 될것
부모 엘리먼트에만 말을 한다
3개의 dvi를 가리키는 자식을 움직이고 싶으면 flex를 할 필요없다
div의 부모에게 말하면된다 즉 body! body가 의 부모다
부모에게만 명시하면된다
부모 엘리먼트를 flex container로 만들어야한다
즉 body의 display가 flex를 주면된다
이제 body가 children을 제어할 수 있다
※ Rule no1. flex는 부모의 display 속성에 해야한다 절대 자식에하는것이 아니다!
display : flex

많은 속성들을 수정할 수 있게 된다
justify-content 등을 줘서 규칙적으로 둘 수 있다
모든 계산을 다 알아서 해준다.
얼마나 빈 공간을 줄지 이런것들을 자동적으로 계산해준다 so cool!

2) 주축 (main axis)과 3) 교차축 (cross axis)
Flex Container는 두개의 축을 가지고 있다 이것이 main axis와 cross axis이다.

justify-content 는 주축 (디폴트가 수평)으로 움직이고 (main axis를 움직임)
align-items는 교차축 (디폴트는 수직)으로 움직인다. (cross axis를 움직임)

※디폴트 값은 바꿀 수 있다.

 

 

 

 

앞으로도 헷갈리지 않을까 

반복해서 숙달하자!!!!!

 

- media query는 and로 연결됨
ex.

@media blah and blah {
    element{
    blah blah 작동해야 할 것들
    }
  } <- 요 친구 까먹고 안닫으면 안된다!!!!