Skip to content
NuvoUI

Flex

flex makes an element a flex container. Short modifier classes on the same element set its direction, alignment and wrapping, and classes on its direct children size them on a 12-column system. The names describe the result: between spreads items apart, x-center centres them across the row.

How flex works

Section titled “How flex works”
  • Modifiers sit on the container. row, col, between, x-center and the other container classes work only next to flex (or a responsive flex@{breakpoint}): class="flex between x-center".
  • Child classes sit on direct children. fill-4, grow, no-shrink and self-center apply only to a direct child of a flex container.
  • Main axis and cross axis. A class with no prefix works on the main axis (center, between). An x- prefix means the cross axis (x-center). x does not mean horizontal: in a col container the main axis is vertical and the cross axis is horizontal.
  • Logical by default. start and end follow the text direction, so a row mirrors in right-to-left layouts.
Group Classes Property
Container flex, flex inline display: flex, display: inline-flex
Direction row, row-reverse, col, col-reverse flex-direction
Main axis start, end, center, between, around, evenly justify-content
Equal share stretch flex: 1 1 0% on every direct child
Cross axis x-start, x-end, x-center, x-stretch, x-baseline align-items
Wrapped lines x-content-start, x-content-end, x-content-center, x-content-between, x-content-around, x-content-evenly, x-content-stretch align-content
Wrapping wrap, nowrap, wrap-reverse flex-wrap
Child size fill-1 to fill-12, fill-auto, fill-full, grow, no-grow flex
Child shrink shrink, no-shrink, shrink-twice flex-shrink
Child alignment self-auto, self-start, self-end, self-center, self-stretch, self-baseline align-self
Child order order-1 to order-12, order-first, order-last, order-none order

Direction

Section titled “Direction”

row (the browser default) lays children out along the inline axis; col stacks them. The -reverse forms reverse the visual order without changing the source order.

1
2
3
1
2
3
<div class="grid cols-2 gap-4">
  <div class="flex row gap-2 p-2 bg-alternate rounded">
    <div class="p-2 bg-brand-subtle rounded">1</div>
    <div class="p-2 bg-brand-subtle rounded">2</div>
    <div class="p-2 bg-brand-subtle rounded">3</div>
  </div>
  <div class="flex col gap-2 p-2 bg-alternate rounded">
    <div class="p-2 bg-brand-subtle rounded">1</div>
    <div class="p-2 bg-brand-subtle rounded">2</div>
    <div class="p-2 bg-brand-subtle rounded">3</div>
  </div>
</div>

Main axis: start, end, center, between

Section titled “Main axis: start, end, center, between”

Main axis classes set justify-content: where the free space on the main axis goes.

startB
centerB
endB
betweenBC
aroundBC
evenlyBC
<div class="space-y-2">
  <div class="flex start gap-2 p-2 bg-alternate rounded"><span class="p-2 bg-brand-subtle rounded">start</span><span class="p-2 bg-brand-subtle rounded">B</span></div>
  <div class="flex center gap-2 p-2 bg-alternate rounded"><span class="p-2 bg-brand-subtle rounded">center</span><span class="p-2 bg-brand-subtle rounded">B</span></div>
  <div class="flex end gap-2 p-2 bg-alternate rounded"><span class="p-2 bg-brand-subtle rounded">end</span><span class="p-2 bg-brand-subtle rounded">B</span></div>
  <div class="flex between p-2 bg-alternate rounded"><span class="p-2 bg-brand-subtle rounded">between</span><span class="p-2 bg-brand-subtle rounded">B</span><span class="p-2 bg-brand-subtle rounded">C</span></div>
  <div class="flex around p-2 bg-alternate rounded"><span class="p-2 bg-brand-subtle rounded">around</span><span class="p-2 bg-brand-subtle rounded">B</span><span class="p-2 bg-brand-subtle rounded">C</span></div>
  <div class="flex evenly p-2 bg-alternate rounded"><span class="p-2 bg-brand-subtle rounded">evenly</span><span class="p-2 bg-brand-subtle rounded">B</span><span class="p-2 bg-brand-subtle rounded">C</span></div>
</div>
Class justify-content
start flex-start
end flex-end
center center
between space-between
around space-around
evenly space-evenly

Cross axis: x-start, x-center, x-end

Section titled “Cross axis: x-start, x-center, x-end”

x-* classes set align-items: how children line up across the row. x-stretch (the browser default) makes them as tall as the row; x-baseline lines up their text.

x-startB
x-centerB
x-endB
x-stretchB
x-baselineB
<div class="grid cols-3 gap-2 text-sm">
  <div class="flex x-start gap-1 h-24 p-2 bg-alternate rounded"><span class="p-1 bg-brand-subtle rounded">x-start</span><span class="p-3 bg-brand-subtle rounded">B</span></div>
  <div class="flex x-center gap-1 h-24 p-2 bg-alternate rounded"><span class="p-1 bg-brand-subtle rounded">x-center</span><span class="p-3 bg-brand-subtle rounded">B</span></div>
  <div class="flex x-end gap-1 h-24 p-2 bg-alternate rounded"><span class="p-1 bg-brand-subtle rounded">x-end</span><span class="p-3 bg-brand-subtle rounded">B</span></div>
  <div class="flex x-stretch gap-1 h-24 p-2 bg-alternate rounded"><span class="p-1 bg-brand-subtle rounded">x-stretch</span><span class="p-3 bg-brand-subtle rounded">B</span></div>
  <div class="flex x-baseline gap-1 h-24 p-2 bg-alternate rounded"><span class="text-xs p-1 bg-brand-subtle rounded">x-baseline</span><span class="text-2xl p-1 bg-brand-subtle rounded">B</span></div>
</div>

The most common pair centres a row of items: flex between x-center for a header, flex center x-center for content in the middle of a box.

Invoices 
<div class="flex between x-center p-3 bg-surface border rounded">
  <strong>Invoices</strong>
  <button type="button">New invoice</button>
</div>

x-content-* classes set align-content, which positions whole lines of a wrapping container on the cross axis. They have an effect only with wrap and free space on the cross axis.

Wrapping

Section titled “Wrapping”

wrap lets children move onto new lines when the row is full; nowrap (the browser default) keeps them on one line, shrinking them if needed.

Design Engineering Finance Operations Sales 
<div class="flex wrap gap-2 max-w-xs p-2 bg-alternate rounded">
  <span class="px-2 py-1 bg-brand-subtle rounded">Design</span>
  <span class="px-2 py-1 bg-brand-subtle rounded">Engineering</span>
  <span class="px-2 py-1 bg-brand-subtle rounded">Finance</span>
  <span class="px-2 py-1 bg-brand-subtle rounded">Operations</span>
  <span class="px-2 py-1 bg-brand-subtle rounded">Sales</span>
</div>

Gap

Section titled “Gap”

gap-* sets the space between children from the spacing scale, on both axes and across wrapped lines. gap-x-* sets only the space between columns, gap-y-* only between lines. See Spacing for the scale.

gap-* and gap-x-* also set the internal custom property --nu-flex-gap on each direct child. The fill-{n} classes read it to subtract the gap from their width, so columns plus gaps add up to exactly the full row. --nu-flex-gap is registered with @property and inherits: false, so a nested flex container does not pick up its parent’s gap; its initial value is 0px. It is not a token and token() does not accept it.

The 12-column fill system

Section titled “The 12-column fill system”

fill-{n} gives a direct child n of 12 columns, minus its share of the gap. fill-6 is half the row, fill-4 a third, fill-3 a quarter. Columns on one row should add up to 12.

fill-6
fill-6
fill-4
fill-4
fill-4
fill-3
fill-9
fill-5
fill-7
<div class="space-y-2">
  <div class="flex gap-4">
    <div class="fill-6 p-2 bg-brand-subtle rounded">fill-6</div>
    <div class="fill-6 p-2 bg-brand-subtle rounded">fill-6</div>
  </div>
  <div class="flex gap-4">
    <div class="fill-4 p-2 bg-brand-subtle rounded">fill-4</div>
    <div class="fill-4 p-2 bg-brand-subtle rounded">fill-4</div>
    <div class="fill-4 p-2 bg-brand-subtle rounded">fill-4</div>
  </div>
  <div class="flex gap-4">
    <div class="fill-3 p-2 bg-alternate rounded">fill-3</div>
    <div class="fill-9 p-2 bg-alternate rounded">fill-9</div>
  </div>
  <div class="flex gap-4">
    <div class="fill-5 p-2 bg-alternate rounded">fill-5</div>
    <div class="fill-7 p-2 bg-alternate rounded">fill-7</div>
  </div>
</div>

Each fill-{n} sets flex: 0 0 <width>, max-width: <width> and min-width: 0, where the width is a calc() over 100% and var(--nu-flex-gap):

.flex > .fill-4 {
  flex: 0 0 calc((100% - 2 * var(--nu-flex-gap)) / 3);
  max-width: calc((100% - 2 * var(--nu-flex-gap)) / 3);
  min-width: 0;
}

With wrap, children that do not fit move to the next line, so fill-* builds a responsive card grid. The column count comes from $column-count (12 by default).

Other child sizes

Section titled “Other child sizes”
Class flex Behaviour
grow 1 1 0% Takes an equal share of the free space with other grow children
fill-auto 1 1 auto Starts at its content size, then grows and shrinks
fill-full 0 0 100% Takes a full row on its own
no-grow none Keeps its own size; neither grows nor shrinks
no-grow w-24
grow takes the rest
fill-auto
fill-auto with longer content
<div class="space-y-2">
  <div class="flex gap-2">
    <div class="no-grow w-24 p-2 bg-alternate rounded">no-grow w-24</div>
    <div class="grow p-2 bg-brand-subtle rounded">grow takes the rest</div>
  </div>
  <div class="flex gap-2">
    <div class="fill-auto p-2 bg-brand-subtle rounded">fill-auto</div>
    <div class="fill-auto p-2 bg-brand-subtle rounded">fill-auto with longer content</div>
  </div>
</div>

shrink, no-shrink and shrink-twice set only flex-shrink (1, 0 and 2). no-shrink keeps an icon or avatar at its size when the row runs out of space.

Stretch: equal shares

Section titled “Stretch: equal shares”

stretch on the container makes every direct child share the main axis equally. It sets flex: 1 1 0% on each child, so all children start from a size of zero and split the row into equal parts, whatever their content.

<div class="flex stretch gap-2 p-2 bg-alternate rounded">
  <button type="button">Day</button>
  <button type="button">Week</button>
  <button type="button">Month with a long label</button>
</div>

Because every child starts from a flex basis of 0%, a width class does not make a child wider: w-32 is ignored. To make one child wider, give it fill-{n} (a column share) or no-grow (its own size). A child with fill-{n}, grow, fill-auto, fill-full or no-grow keeps its own flex value instead of the equal share.

Stretch: w-32 has no effect, fill-6 and no-grow do
w-32 (ignored)
B
C
fill-6: half the row
B
C
no-grow w-32
B
C
<div class="space-y-2">
  <div class="flex stretch gap-2 p-2 bg-alternate rounded">
    <div class="w-32 p-2 bg-brand-subtle rounded">w-32 (ignored)</div>
    <div class="p-2 bg-brand-subtle rounded">B</div>
    <div class="p-2 bg-brand-subtle rounded">C</div>
  </div>
  <div class="flex stretch gap-2 p-2 bg-alternate rounded">
    <div class="fill-6 p-2 bg-brand text-on-brand rounded">fill-6: half the row</div>
    <div class="p-2 bg-brand-subtle rounded">B</div>
    <div class="p-2 bg-brand-subtle rounded">C</div>
  </div>
  <div class="flex stretch gap-2 p-2 bg-alternate rounded">
    <div class="no-grow w-32 p-2 bg-brand text-on-brand rounded">no-grow w-32</div>
    <div class="p-2 bg-brand-subtle rounded">B</div>
    <div class="p-2 bg-brand-subtle rounded">C</div>
  </div>
</div>

Stretch compared with fill-4 and wrap

Section titled “Stretch compared with fill-4 and wrap”

stretch never wraps: with a flex basis of 0%, every child fits on one line however many there are, so six children become six narrow columns. fill-4 with wrap gives each child a third of the row, so six children form two rows of three.

Six children: flex stretch (top) and flex wrap with fill-4 (bottom)
1
2
3
4
5
6
1
2
3
4
5
6
<div class="space-y-4">
  <div class="flex stretch wrap gap-2 p-2 bg-alternate rounded">
    <div class="p-2 bg-brand-subtle rounded">1</div>
    <div class="p-2 bg-brand-subtle rounded">2</div>
    <div class="p-2 bg-brand-subtle rounded">3</div>
    <div class="p-2 bg-brand-subtle rounded">4</div>
    <div class="p-2 bg-brand-subtle rounded">5</div>
    <div class="p-2 bg-brand-subtle rounded">6</div>
  </div>
  <div class="flex wrap gap-2 p-2 bg-alternate rounded">
    <div class="fill-4 p-2 bg-brand-subtle rounded">1</div>
    <div class="fill-4 p-2 bg-brand-subtle rounded">2</div>
    <div class="fill-4 p-2 bg-brand-subtle rounded">3</div>
    <div class="fill-4 p-2 bg-brand-subtle rounded">4</div>
    <div class="fill-4 p-2 bg-brand-subtle rounded">5</div>
    <div class="fill-4 p-2 bg-brand-subtle rounded">6</div>
  </div>
</div>

Use stretch for a fixed set of items that must share one row, such as tabs or a segmented control. Use fill-{n} with wrap for a list of any length that should form columns.

stretch is not x-stretch: x-stretch stretches children across the cross axis (align-items: stretch), stretch shares the main axis.

Child alignment and order

Section titled “Child alignment and order”

self-* overrides the container’s cross axis alignment for one child. order-* changes the visual position of a child without changing the source order.

x-start
self-center
self-end
order-first (last in source)
<div class="flex x-start gap-2 h-24 p-2 bg-alternate rounded">
  <div class="p-2 bg-brand-subtle rounded">x-start</div>
  <div class="self-center p-2 bg-brand-subtle rounded">self-center</div>
  <div class="self-end p-2 bg-brand-subtle rounded">self-end</div>
  <div class="order-first p-2 bg-alternate border rounded">order-first (last in source)</div>
</div>

order-first is order: -1, order-last is order: 9999 and order-none is order: 0.

Responsive variants

Section titled “Responsive variants”

Every container modifier and child class has a responsive variant with an @{breakpoint} suffix: row@md, between@lg, fill-6@md, stretch@md. The container itself can be responsive too: flex@md is a flex container from md upwards. Variants apply from their breakpoint upwards.

Stacked on small screens, a row from md
fill-full fill-4@md
fill-full fill-8@md
<div class="flex col row@md gap-4">
  <div class="fill-full fill-4@md p-2 bg-brand-subtle rounded">fill-full fill-4@md</div>
  <div class="fill-full fill-8@md p-2 bg-brand-subtle rounded">fill-full fill-8@md</div>
</div>
SuffixMedia query
@xs@media (min-width: 480px)
@sm@media (min-width: 640px)
@md@media (min-width: 768px)
@lg@media (min-width: 1024px)
@xl@media (min-width: 1280px)
@2xl@media (min-width: 1536px)

Flex classes have no state variants.

SCSS

Section titled “SCSS”

Every class has a mixin of the same name; fill-{n} is fill(n). In SCSS the child mixins work on any element, not only a direct child of a .flex class.

@use "@nuvoui/core" as *;


.toolbar {
  @include apply(flex, between, x-center, gap(2), col md);
}
.toolbar__title {
  @include apply(grow, overflow-label);
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--nu-space-2);
}
.toolbar > * {
  --nu-flex-gap: var(--nu-space-2);
}
@media (min-width: 768px) {
  .toolbar {
    flex-direction: column;
  }
}
.toolbar__title {
  flex: 1 1 0%;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0;
}

stretch writes a child rule:

.tabs {
  @include apply(flex, stretch);
}
.tabs {
  display: flex;
}
.tabs > * {
  flex: 1 1 0%;
}

fill()

Section titled “fill()”

fill($size) takes a number of columns from 1 to $column-count. It reads --nu-flex-gap, which the gap mixins set on direct children, so place the element directly inside the container that has the gap. Without a gap it reads the initial value 0px.

Input Result
fill(4) flex: 0 0 calc((100% - 2 * var(--nu-flex-gap)) / 3) plus max-width and min-width: 0
fill(0), fill(13), fill(4px) fill(0): use a whole number of columns from 1 to 12. (the same message names each input)

Removed in 2.0

Section titled “Removed in 2.0”

flex-inline was removed; use inline-flex. A removed name raises Undefined mixin. when included directly and Mixin not found: flex-inline inside apply(). The .stretch class changed meaning: in 1.x it set justify-content: stretch, which has no effect in flex layout.

Configuration

Section titled “Configuration”

$column-count (default 12) sets the number of columns, so the fill-* and order-* classes and the fill() limit follow it.

@use "@nuvoui/core" with (
  $generate-utility-classes: true,
  $column-count: 24
);

The flex feature flag owns every flex class: .flex, .flex.inline, the responsive .flex@{breakpoint}, all modifiers and child classes, and .container.flex. Turning off the displays flag does not remove them. The mixins stay available.

@use "@nuvoui/core" with (
  $generate-utility-classes: true,
  $feature-flags: ("flex": false)
);

Class reference

Section titled “Class reference”

Generated from the compiled core build. Each class is listed with its plain .flex selector; every rule also applies to the responsive .flex@{breakpoint} containers. Responsive modifier variants are not listed.

Container (1 rules)
SelectorDeclarationsDefault value
.flexdisplay: flexflex
Direction and wrapping (7 rules)
SelectorDeclarationsDefault value
.flex.rowflex-direction: rowrow
.flex.row-reverseflex-direction: row-reverserow-reverse
.flex.colflex-direction: columncolumn
.flex.col-reverseflex-direction: column-reversecolumn-reverse
.flex.wrapflex-wrap: wrapwrap
.flex.nowrapflex-wrap: nowrapnowrap
.flex.wrap-reverseflex-wrap: wrap-reversewrap-reverse
Main axis and stretch (6 rules)
SelectorDeclarationsDefault value
.flex.startjustify-content: flex-startflex-start
.flex.endjustify-content: flex-endflex-end
.flex.centerjustify-content: centercenter
.flex.betweenjustify-content: space-betweenspace-between
.flex.aroundjustify-content: space-aroundspace-around
.flex.evenlyjustify-content: space-evenlyspace-evenly
Cross axis (12 rules)
SelectorDeclarationsDefault value
.flex.x-startalign-items: flex-startflex-start
.flex.x-endalign-items: flex-endflex-end
.flex.x-centeralign-items: centercenter
.flex.x-baselinealign-items: baselinebaseline
.flex.x-stretchalign-items: stretchstretch
.flex.x-content-startalign-content: flex-startflex-start
.flex.x-content-endalign-content: flex-endflex-end
.flex.x-content-centeralign-content: centercenter
.flex.x-content-betweenalign-content: space-betweenspace-between
.flex.x-content-aroundalign-content: space-aroundspace-around
.flex.x-content-evenlyalign-content: space-evenlyspace-evenly
.flex.x-content-stretchalign-content: stretchstretch
Child size and shrink (19 rules)
SelectorDeclarationsDefault value
.flex > .fill-autoflex: 1 1 auto1 1 auto
.flex > .fill-fullflex: 0 0 100%0 0 100%
.flex > .growflex: 1 1 0%1 1 0%
.flex > .no-growflex: nonenone
.flex > .shrinkflex-shrink: 11
.flex > .no-shrinkflex-shrink: 00
.flex > .shrink-twiceflex-shrink: 22
.flex > .fill-1flex: 0 0 calc((100% - 11 * var(--nu-flex-gap)) / 12)
max-width: calc((100% - 11 * var(--nu-flex-gap)) / 12)
min-width: 0		0 0 calc((100% - 11 * var(--nu-flex-gap)) / 12)
calc((100% - 11 * var(--nu-flex-gap)) / 12)
0
.flex > .fill-2flex: 0 0 calc((100% - 5 * var(--nu-flex-gap)) / 6)
max-width: calc((100% - 5 * var(--nu-flex-gap)) / 6)
min-width: 0		0 0 calc((100% - 5 * var(--nu-flex-gap)) / 6)
calc((100% - 5 * var(--nu-flex-gap)) / 6)
0
.flex > .fill-3flex: 0 0 calc((100% - 3 * var(--nu-flex-gap)) / 4)
max-width: calc((100% - 3 * var(--nu-flex-gap)) / 4)
min-width: 0		0 0 calc((100% - 3 * var(--nu-flex-gap)) / 4)
calc((100% - 3 * var(--nu-flex-gap)) / 4)
0
.flex > .fill-4flex: 0 0 calc((100% - 2 * var(--nu-flex-gap)) / 3)
max-width: calc((100% - 2 * var(--nu-flex-gap)) / 3)
min-width: 0		0 0 calc((100% - 2 * var(--nu-flex-gap)) / 3)
calc((100% - 2 * var(--nu-flex-gap)) / 3)
0
.flex > .fill-5flex: 0 0 calc((100% - 1.4 * var(--nu-flex-gap)) / 2.4)
max-width: calc((100% - 1.4 * var(--nu-flex-gap)) / 2.4)
min-width: 0		0 0 calc((100% - 1.4 * var(--nu-flex-gap)) / 2.4)
calc((100% - 1.4 * var(--nu-flex-gap)) / 2.4)
0
.flex > .fill-6flex: 0 0 calc((100% - 1 * var(--nu-flex-gap)) / 2)
max-width: calc((100% - 1 * var(--nu-flex-gap)) / 2)
min-width: 0		0 0 calc((100% - 1 * var(--nu-flex-gap)) / 2)
calc((100% - 1 * var(--nu-flex-gap)) / 2)
0
.flex > .fill-7flex: 0 0 calc((100% - 0.7142857143 * var(--nu-flex-gap)) / 1.7142857143)
max-width: calc((100% - 0.7142857143 * var(--nu-flex-gap)) / 1.7142857143)
min-width: 0		0 0 calc((100% - 0.7142857143 * var(--nu-flex-gap)) / 1.7142857143)
calc((100% - 0.7142857143 * var(--nu-flex-gap)) / 1.7142857143)
0
.flex > .fill-8flex: 0 0 calc((100% - 0.5 * var(--nu-flex-gap)) / 1.5)
max-width: calc((100% - 0.5 * var(--nu-flex-gap)) / 1.5)
min-width: 0		0 0 calc((100% - 0.5 * var(--nu-flex-gap)) / 1.5)
calc((100% - 0.5 * var(--nu-flex-gap)) / 1.5)
0
.flex > .fill-9flex: 0 0 calc((100% - 0.3333333333 * var(--nu-flex-gap)) / 1.3333333333)
max-width: calc((100% - 0.3333333333 * var(--nu-flex-gap)) / 1.3333333333)
min-width: 0		0 0 calc((100% - 0.3333333333 * var(--nu-flex-gap)) / 1.3333333333)
calc((100% - 0.3333333333 * var(--nu-flex-gap)) / 1.3333333333)
0
.flex > .fill-10flex: 0 0 calc((100% - 0.2 * var(--nu-flex-gap)) / 1.2)
max-width: calc((100% - 0.2 * var(--nu-flex-gap)) / 1.2)
min-width: 0		0 0 calc((100% - 0.2 * var(--nu-flex-gap)) / 1.2)
calc((100% - 0.2 * var(--nu-flex-gap)) / 1.2)
0
.flex > .fill-11flex: 0 0 calc((100% - 0.0909090909 * var(--nu-flex-gap)) / 1.0909090909)
max-width: calc((100% - 0.0909090909 * var(--nu-flex-gap)) / 1.0909090909)
min-width: 0		0 0 calc((100% - 0.0909090909 * var(--nu-flex-gap)) / 1.0909090909)
calc((100% - 0.0909090909 * var(--nu-flex-gap)) / 1.0909090909)
0
.flex > .fill-12flex: 0 0 calc((100% - 0 * var(--nu-flex-gap)) / 1)
max-width: calc((100% - 0 * var(--nu-flex-gap)) / 1)
min-width: 0		0 0 calc((100% - 0 * var(--nu-flex-gap)) / 1)
calc((100% - 0 * var(--nu-flex-gap)) / 1)
0
Child alignment and order (21 rules)
SelectorDeclarationsDefault value
.flex > .order-firstorder: -1-1
.flex > .order-lastorder: 99999999
.flex > .order-noneorder: 00
.flex > .self-endalign-self: flex-endflex-end
.flex > .self-startalign-self: flex-startflex-start
.flex > .self-centeralign-self: centercenter
.flex > .self-stretchalign-self: stretchstretch
.flex > .self-baselinealign-self: baselinebaseline
.flex > .self-autoalign-self: autoauto
.flex > .order-1order: 11
.flex > .order-2order: 22
.flex > .order-3order: 33
.flex > .order-4order: 44
.flex > .order-5order: 55
.flex > .order-6order: 66
.flex > .order-7order: 77
.flex > .order-8order: 88
.flex > .order-9order: 99
.flex > .order-10order: 1010
.flex > .order-11order: 1111
.flex > .order-12order: 1212

Accessibility and RTL

Section titled “Accessibility and RTL”
  • Logical alignment. start and end, and the order of children in a row, follow the text direction. A right-to-left page mirrors the layout with dir="rtl" alone.
  • Source order. Visual reordering with order-*, row-reverse and col-reverse does not change the reading or focus order (WCAG 1.3.2, 2.4.3).
  • Reflow. Use wrap, or a responsive col that becomes row@md, so content fits at 320 CSS pixels and 400% zoom without horizontal scrolling (WCAG 1.4.10).

The same markup in both directions: start packs items at the start side, and the first child is on the right in right-to-left text.

LTR
1
2
3
RTL
1
2
3
<div class="flex start gap-2 p-2 bg-alternate rounded">
  <div class="p-2 bg-brand text-on-brand rounded">1</div>
  <div class="p-2 bg-brand-subtle rounded">2</div>
  <div class="p-2 bg-brand-subtle rounded">3</div>
</div>