[CSS] Row와 Column, Main Axis와 Cross Axis

Learn the basics - Row, Column, Main Axis, Cross Axis

행(Row)과 열(Column)

축 개념을 이해하려면 row와 column부터 알아야 한다. row≒가로≒inline, column≒세로≒block이다.

Block-level elements와 Inline elements

---

축(Axis)

flexbox 개념을 이해하려면 축부터 알아야 한다.

주축(Main Axis)

flex-direction:row 또는 flex-direction:row-reverse일 때, main axis는 가로 방향이 된다.

flex-direction:column 또는 flex-direction:column-reverse일 때, main axis는 세로 방향이 된다.

교차축(Cross Axis)

이름 그대로 주축과 '교차'한다. 따라서 주축이 가로면 교차축은 세로, 주축이 세로면 교차축은 가로 방향이 된다.

flex-direction이 row 또는 row-reverse면, cross axis는 주축(row)과 교차하는 세로(column) 방향이 된다.

flex-direction이 column이나 column-reverse면 cross axis는 세로 방향이 된다.

---

참고

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN