CSS Flexbox의 주축과 교차축
Flexbox에 대해 두 가지 용어로 말할 수 있습니다: 첫 번째는 행 또는 열, 두 번째는 축의 용어입니다. 행과 열에 대해서는 이미 알아보았으니, 이제 축에 대해 알아보겠습니다. 축을 이해하는 것은 요소를 수평 또는 수직으로 정렬하기 위해 필요합니다.
Flex 요소를 다룰 때는 항상
주축과 교차축이 존재합니다. 우리는 요소를
주축을 따라 그리고 주축을 가로질러
정렬할 수 있습니다. 주축은 4가지
방향을 가질 수 있습니다: 왼쪽에서 오른쪽, 오른쪽에서 왼쪽,
위에서 아래, 아래에서 위.
교차축의 방향은 주축의 방향에 따라 달라집니다: 주축이 수평이면 교차축은 위에서 아래로 향하고, 주축이 수직이면 교차축은 왼쪽에서 오른쪽으로 향합니다. 교차축은 다른 방향을 가질 수 없습니다.
주축의 방향은
flex-direction 속성으로 조절됩니다.
이 속성의 값이 row이면 주축 방향은
왼쪽에서 오른쪽이며, 값이 row-reverse이면
오른쪽에서 왼쪽입니다. 값 column은
축을 위에서 아래로 향하게 하고, 값 column-reverse은
아래에서 위로 향하게 합니다.
주축이 수평이라고 가정합니다. 교차축은 어느 방향으로 향할까요?
주축이 수직이라고 가정합니다. 교차축은 어느 방향으로 향할까요?
교차축이 오른쪽을 향한다고 가정합니다. 이 경우 주축은 어느 방향으로 향할 수 있을까요?
교차축이 아래를 향한다고 가정합니다. 이 경우 주축은 어느 방향으로 향할 수 있을까요?
교차축이 오른쪽에서 왼쪽으로 향할 수 있을까요?
교차축이 아래에서 위로 향할 수 있을까요?
flex-direction 속성의 값이
row이라고 가정합니다. 주축은 어느 방향으로
향할까요? 교차축은 어느 방향으로
향할까요?
flex-direction 속성의 값이
column이라고 가정합니다. 주축은 어느 방향으로
향할까요? 교차축은 어느 방향으로
향할까요?
flex-direction 속성의 값이
row-reverse이라고 가정합니다. 주축은 어느 방향으로
향할까요? 교차축은 어느 방향으로
향할까요?
flex-direction 속성의 값이
column-reverse이라고 가정합니다. 주축은 어느 방향으로
향할까요? 교차축은 어느 방향으로
향할까요?
