display : flex일땐 flex-direction의 defalut는 row이다.

물론 row값일땐 main-axis는 horizontal이고 cross-axis는 vertical이다. 하지만 우리는 이 wrapper container의 방향을 바꾸고 싶을때가 있다. 어떻게 아이템들이 수평으로만 나란할 수가 있겠는가? 우리는 아이템들을 분명 수직으로 바꾸고싶을때가 있을 것이다. 그럴땐 우리는 flex-direction을 column으로 바꿔주면 된다.

그럼 이때 column으로 바뀌었을때 main, cross axis는 각각 어떻게 변할 것인가? 얘기는 간단하다.

main-axis는 수직이되고, cross axis는 수평이 된다. 그렇기에 수직일땐 align-items를 이용해서 center를 맞춰주면 된다. /이때는 align-items가 가로축이다/