Flexbox

Flexbox 는 박스를 배열할 때 유용하다.

1. Flexbox part.1

1) 자식 element 에는 어떤 것도 적지 않아야 한다.

-부모 element 에만 명시해야 함.

-부모 element (ex) body 태그에

display: flex;

라고 적는다.)

2) main axis : 주축 - 수평

- justify-content 은 main axis 에 적용

 

main axis 가 수평인 이유

flex-direction: row;

--> 이것이 디폴트값!

 

3) cross axis : 교차축 - 수직

-align-items 은 cross axis 에 적용

flex-direction: column;

--> 으로 바꾸면 모든 것이 반대로!

 

*vh : viewport height 지표

 

2. Flexbox part.2

1) 주축과 교차축 바꾸기

-기본

flex-direction: row;

-반대

flex-direction: column;