Các tiện ích để kiểm soát hướng của các mục flex.
| 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; |
Sử dụng flex-row để định vị các mục flex theo chiều ngang cùng hướng với văn bản:
<div class="flex flex-row ..."> <div>01</div> <div>02</div> <div>03</div></div>Sử dụng flex-row-reverse để định vị các mục flex theo chiều ngang theo hướng ngược lại:
<div class="flex flex-row-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>Sử dụng flex-col để định vị các mục flex theo chiều dọc:
<div class="flex flex-col ..."> <div>01</div> <div>02</div> <div>03</div></div>Sử dụng flex-col-reverse để định vị các mục flex theo chiều dọc theo hướng ngược lại:
<div class="flex flex-col-reverse ..."> <div>01</div> <div>02</div> <div>03</div></div>Prefix a flex-direction utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="flex flex-col md:flex-row ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.