flex-direction

1. flex-direction이란?

flex-direction는 flexbox 레이아웃에서 요소들이 주축(메인 축)에 따라 배치되는 방향을 결정하는 속성이다. 

주로 요소들이 가로 또는 세로 방향으로 정렬되는 방식이다.

flex-direction에는 네가지 주요 값이 있다.

• row(기본값) : 요소들이 왼쪽에서 오른쪽으로 가로 방향으로 배치된다.
• row-reverse : 요소들이 오른쪽에서 왼쪽으로 가로 방향으로 배치된다.
• column : 요소들이 위에서 아래로 세로 방향으로 배치된다.
• column-reverse : 요소들이 아래서 위로 세로 방향으로 배치된다.

이번에 배운 것은 column은 세로축이 Main-axis로 변하고, 가로축이 Cross-axis로 바뀐다.

align-items: normal(stretch)로 인해 row일 때는 위아래로 늘어나지만, column으로 바뀔 때는 가로로 늘어난다.

 

column일 때는 justify-content: center는 세로축 중앙정령이다.

basis도 row일때는 너비로 였지만, 높이를 조절하게 된다. grow, shrink도 마찬가지이다.

flex-grow: 1은 가용공간을 너비로 기준했지만, column은 세로로 가용공간을 기준으로 나눠가진다.

 

그래서 콘텐츠의 양이 많아졌을 때

flex-basis:0, flex-grow: 1 일때, min-width가 아니라 min-height의 영향을 받는다.