Flex 방향

Flex 방향 (Flex Direction)

flex 항목들이 놓이는 방향을 정해 주는 유틸리티예요. 가로(row)로 나란히 둘지, 세로(column)로 쌓을지, 그리고 그 순서를 뒤집을지까지 결정할 수 있어요.

출처: 문서

flex-row flex-direction: row;

flex-row-reverse flex-direction: row-reverse;

flex-col flex-direction: column;

flex-col-reverse flex-direction: column-reverse;

flex-row를 사용하면 flex 항목을 텍스트와 같은 방향으로 가로로 배치할 수 있어요.

01 02 03

<div class="flex flex-row ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

flex-row-reverse를 사용하면 flex 항목을 반대 방향으로 가로로 배치할 수 있어요.

01 02 03

<div class="flex flex-row-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

flex-col을 사용하면 flex 항목을 세로로 배치할 수 있어요.

01 02 03

<div class="flex flex-col ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

flex-col-reverse를 사용하면 flex 항목을 반대 방향으로 세로로 배치할 수 있어요.

01 02 03

<div class="flex flex-col-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

flex-direction 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<div class="flex flex-col md:flex-row ...">
  <!-- ... -->
</div>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.