flex-direction

플렉스 아이템의 방향을 제어하는 유틸리티입니다.

Class Styles

Class	Styles
`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-direction: row;

flex-row-reverse

flex-direction: row-reverse;

flex-col

flex-direction: column;

flex-col-reverse

flex-direction: column-reverse;

예제

flex-row를 사용하면 플렉스 아이템을 텍스트와 같은 방향으로 수평으로 배치할 수 있습니다.

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

flex-row-reverse를 사용하면 플렉스 아이템을 수평으로 반대 방향으로 배치할 수 있습니다:

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

플렉스 아이템을 세로로 배치하려면 flex-col을 사용하세요:

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

flex-col-reverse를 사용하면 플렉스 아이템을 세로 방향으로 반대 순서로 배치할 수 있습니다:

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

접두사 a flex-direction 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

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

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.