Flex direction

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "flex-direction"; export const description = "Utilities for controlling the direction of flex items.";

Examples

Row

Use flex-row to position flex items horizontally in the same direction as text:

{

01

02

03

}

<!-- [!code classes:flex-row] -->
<div class="flex flex-row ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Row reversed

Use flex-row-reverse to position flex items horizontally in the opposite direction:

{

01

02

03

}

<!-- [!code classes:flex-row-reverse] -->
<div class="flex flex-row-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Column

Use flex-col to position flex items vertically:

{

01

02

03

}

<!-- [!code classes:flex-col] -->
<div class="flex flex-col ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Column reversed

Use flex-col-reverse to position flex items vertically in the opposite direction:

{

01

02

03

}

<!-- [!code classes:flex-col-reverse] -->
<div class="flex flex-col-reverse ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Responsive design