Skip to content

Latest commit

 

History

History
130 lines (101 loc) · 3.43 KB

flex-direction.mdx

File metadata and controls

130 lines (101 loc) · 3.43 KB

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.";

<ApiTable rows={[ ["flex-row", "flex-direction: row;"], ["flex-row-reverse", "flex-direction: row-reverse;"], ["flex-col", "flex-direction: column;"], ["flex-col-reverse", "flex-direction: column-reverse;"], ]} />

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