[HTML/CSS] Flex box, justify-content, align-item

Flex Box

자식에게 명시하지 않고 부모에게 명시한다. div의 부모를 diplay: flex로 만든다.

을 적용하고 싶으면 먼저 display: flex가 필요하다. 

<div> 안의 요소들도 flex를 하면 justify-content, align-item이 가능하다.

 

flex-direction: column으로 하면 주 축은 수직이 되고, 교차 축은 수평이 된다.

 

 

justify-content

기본 축(주 축) 가로(수평) 정렬 방식 

 

align-item

교차 축 세로(수직) 정렬 방식, height: 100vh로 설정한 뒤에 align-item: center를 한다. 

기본 body가 이미 전체를 중심으로 하기에 height: 100vh를 하지 않으면 움직임이 없다. (body를 기준으로 할 때만)