Flex 주축과 교차축, 시작점과 끝점

주 축(main-axis)과 교차 축(cross-axis)

위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같다.
값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 된다.
반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 된다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다.

flex-direction: row 와 flex-direction: column의 주축과 교차축의 차이점

 

 

시작점(flex-start)과 끝점(flex-end)

시작점(flex-start)과 끝점(flex-end)이라는 개념도 있다.
이는 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다.
역시 방향에 따라 시작점과 끝점이 달라진다.

flex-direction: row 와 flex-direction: column의 시작점과 끝점의 차이점

뒤에서 언급할 속성 중 값으로 flex-start와 flex-end를 사용하는데 이는 방향에 맞는 그 시작점과 끝점을 의미한다.