flex-direction

Setting the direction of flex items.

Overview

Examples

Lay out items in a row

Use flex-row for the default horizontal main axis.

<nav class="flex flex-row gap:sm">    ...</nav>

@layer utilities {    .flex {        display: flex    }    .flex-row {        flex-direction: row    }}

Stack items in a column

Use flex-col when children should stack vertically.

<section class="flex flex-col gap:md">    ...</section>

Reverse visual order

Use flex-row-reverse or flex-col-reverse only when the visual order intentionally differs from source order.

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

Reversed flex direction changes visual order, but it does not rewrite the document source. Keep keyboard and reading order in mind.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="flex flex-col flex-row@sm flex-col@print">...</div>

Use gap, justify-content, and align-items to control spacing and alignment along the chosen axis.