flexbox

display: flex

• 모든 요소를 가로로 둠

justify-content : 가로로 요소들을 배치할 것이다.

display: flex;
justify-content: center; /* 요소들 배치를 이렇게 할 거다. */

justify-content: space-between;
justify-content: space-around;
etc

align-items: 모든 요소들을 가로로 두지만 세로로 요소들을 배치할 것이다.

• space-between 같은 space는 못쓴다. 아니 없다.

display: flex;
align-items: center; /* 요소들 배치를 이렇게 할 거다. */

모든 요소를 화면 정중앙에 위치시키려면?

display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* vh : view height */

 

모든요소들을 세로로 두고싶다.

• 단, justify-content와 align-items의 역할은 바뀐다는 점. 유의

flex-direction:column