Flex

Utility classes for Flexbox layouts. Row and column directions with alignment, centering, and stretching modifiers.

#

When to Use Flex

Use Flex inside Layout when you need flexible row or column arrangements. Flex lets items size by their content: width and height follow what's inside, rather than a fixed grid. It's the right choice when you want natural, content-driven layouts without strict column structure.

#

Content-Based Sizing

Flex items grow and shrink based on their content by default. You can override this with stretch modifiers, grow/shrink utilities, or basis classes. Use Flex when your layout should adapt to the content rather than forcing content into a fixed grid: toolbars, inline groups of labels and values, or stacks of variable-height cards.

#

Standalone or Nested

Use Flex alone as the only child of Layout for simpler layouts. Nest it inside Grid and each grid cell can hold its own Flex container for row or column flexibility within that cell. Nest it inside Columns columns for per-column arrangement.

#

Compared to Grid and Columns

Choose Flex when you need flexible, content-sized layouts. If you need strict column alignment and spans, use Grid. If you have lots of same-type data and want the system to handle column distribution and overflow, use Columns .

#

Base Structure

Flex arranges content in one of two directions: horizontal (row) or vertical (column). These base structures can be combined with alignment and stretch modifiers for complex layouts.

#

Row Direction

Use flex flex--row to create a horizontal layout:

Item 1
Item 2
Item 3
TRMNL Logo Flex Row Direction 
<div class="flex flex--row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
#

Column Direction

Use flex flex--col to create a vertical layout:

Item 1
Item 2
Item 3
TRMNL Logo Flex Column Direction 
<div class="flex flex--col">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
#

Alignment Modifiers

Once you've chosen a base direction, you can apply alignment modifiers to control how items are positioned within their container. Modifiers cover directional alignment (left/right/top/bottom) and centering.

flex--start and flex--end follow the container's direction: in a row they match flex--left and flex--right, in a column they match flex--top and flex--bottom. On a flex with no direction modifier they match flex--left and flex--right. Use them when a container flips direction responsively and the alignment should flip with it.

#

Row Horizontal Alignment

For row layouts, use flex--left, flex--center-x, or flex--right to control horizontal alignment:

Left
Center X
Right
TRMNL Logo Flex Row Horizontal Alignment 
<div class="flex flex--row flex--left">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<div class="flex flex--row flex--center-x">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<div class="flex flex--row flex--right">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>
#

Row Vertical Alignment

For row layouts, use flex--top, flex--center-y, or flex--bottom to control vertical alignment:

Top
Center Y
Bottom
TRMNL Logo Flex Row Vertical Alignment 
<div class="flex flex--row flex--top">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<div class="flex flex--row flex--center-y">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<div class="flex flex--row flex--bottom">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>
#

Column Horizontal Alignment

For column layouts, use flex--left, flex--center-x, or flex--right to control horizontal alignment:

Left
Center X
Right
TRMNL Logo Flex Column Horizontal Alignment 
<div class="flex flex--col flex--left">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<div class="flex flex--col flex--center-x">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<div class="flex flex--col flex--right">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>
#

Column Vertical Alignment

For column layouts, use flex--top, flex--center-y, or flex--bottom to control vertical alignment:

Top
Center Y
Bottom
TRMNL Logo Flex Column Vertical Alignment 
<div class="flex flex--col flex--top">
  <div>Item</div>
</div>

<div class="flex flex--col flex--center">
  <div>Item</div>
</div>

<div class="flex flex--col flex--bottom">
  <div>Item</div>
</div>
#

Stretch Modifiers

Stretch works at two levels: container modifiers affect all children, while item classes only affect the specific element they're applied to.

#

Container Stretch

Use flex--stretch, flex--stretch-x, or flex--stretch-y to control how children fill the container:

Stretch All
Stretch X
Stretch Y
TRMNL Logo Flex Container Stretch 
<div class="flex flex--row flex--stretch">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<div class="flex flex--row flex--stretch-x">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<div class="flex flex--row flex--stretch-y">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>
#

Individual Item Stretch (Row)

Use stretch, stretch-x, or stretch-y on individual items in a row layout:

Stretch
Normal
Stretch
Stretch X
Normal
Stretch X
Stretch Y
Normal
Stretch Y
TRMNL Logo Flex Item Stretch (Row) 
<div class="flex flex--row">
  <div class="stretch">Stretches in cross-axis</div>
  <div>Normal item</div>
  <div class="stretch">Stretches in cross-axis</div>
</div>

<div class="flex flex--row">
  <div class="stretch-x">Stretches horizontally</div>
  <div>Normal item</div>
  <div class="stretch-x">Stretches horizontally</div>
</div>

<div class="flex flex--row">
  <div class="stretch-y">Stretches vertically</div>
  <div>Normal item</div>
  <div class="stretch-y">Stretches vertically</div>
</div>
#

Individual Item Stretch (Column)

Use stretch, stretch-x, or stretch-y on individual items in a column layout:

Stretch
Normal
Stretch
Stretch X
Normal
Stretch X
Stretch Y
Normal
Stretch Y
TRMNL Logo Flex Item Stretch (Column) 
<div class="flex flex--col">
  <div class="stretch">Stretches in cross-axis</div>
  <div>Normal item</div>
  <div class="stretch">Stretches in cross-axis</div>
</div>

<div class="flex flex--col">
  <div class="stretch-x">Stretches horizontally</div>
  <div>Normal item</div>
  <div class="stretch-x">Stretches horizontally</div>
</div>

<div class="flex flex--col">
  <div class="stretch-y">Stretches vertically</div>
  <div>Normal item</div>
  <div class="stretch-y">Stretches vertically</div>
</div>
#

Preventing Item Shrinkage

Use shrink-0 on flex children to prevent them from shrinking when other items try to take up more space.

no-shrink is an alias for the same rule and stays supported: both classes set flex-shrink: 0 under the same responsive and orientation variants. Write shrink-0 in new markup, matching the grow-0 naming in the item utilities below.

Can Shrink
Stretching Content That Pushes Others
Won't Shrink
Stretching Content That Pushes Others
TRMNL Logo Flex Prevent Shrinking 
<div class="flex flex--row">
  <div class="shrink-0">Maintains its width</div>
  <div class="stretch">Stretches but won't squish the shrink-0 item</div>
</div>

<!-- no-shrink is an alias for shrink-0 -->
<div class="flex flex--row">
  <div class="no-shrink">Maintains its width</div>
</div>
#

Orientation-Responsive Layouts

Flexbox utilities support orientation-responsive variants, allowing you to change layouts when the screen is rotated. This is particularly useful for adapting navigation bars, toolbars, and content grids.

#

Adaptive Direction

Use portrait: prefix to change flex direction or alignment when the screen is in portrait orientation. Try rotating the device preview to see the effect.

Nav Item 1
Nav Item 2
Nav Item 3
Row in landscape, column in portrait
TRMNL Logo Flex Orientation Responsive 
<!-- Navigation that adapts to orientation -->
<div class="flex flex--row portrait:flex--col gap">
  <div class="stretch">Nav Item 1</div>
  <div class="stretch">Nav Item 2</div>
  <div class="stretch">Nav Item 3</div>
</div>

<!-- Combined with size breakpoints -->
<div class="flex flex--col md:flex--row md:portrait:flex--col">
  <!-- Column on small screens -->
  <!-- Row on medium+ landscape screens -->
  <!-- Column on medium+ portrait screens -->
</div>
#

Extended Directions

In addition to standard directions, Flex supports reverse flow for quick reordering on the main axis. Use flex--row-reverse and flex--col-reverse to invert visual order without changing the DOM.

Alignment modifiers answer to the reversed direction. flex--row-reverse flex--left aligns along the row, the same axis flex--row flex--left uses.

#

Row Reverse

A
B
C
TRMNL Logo Flex Row Reverse 
<div class="flex flex--row-reverse">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>
#

Column Reverse

1
2
3
TRMNL Logo Flex Column Reverse 
<div class="flex flex--col-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
#

Wrapping and Multi-Line Alignment

Control line breaks with flex--wrap, flex--nowrap, and flex--wrap-reverse. When wrapping, use align-content modifiers to distribute lines: flex--content-start|center|end|between|around|evenly|stretch.

#

Wrap vs No-wrap

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
TRMNL Logo Flex Wrap vs No-wrap 
<div class="flex flex--row flex--wrap gap">
  <div>Item 1</div> <div>Item 2</div> <div>Item 3</div>
  <div>Item 4</div> <div>Item 5</div> <div>Item 6</div>
</div>

<div class="flex flex--row flex--nowrap gap">
  <div>Item 1</div> <div>Item 2</div> <div>Item 3</div>
  <div>Item 4</div> <div>Item 5</div> <div>Item 6</div>
</div>
#

Wrapping Item Elements

.item elements will wrap in flex rows.

Team Meeting Weekly team sync-up
Team Meeting Weekly team sync-up
Team Meeting Weekly team sync-up
Team Meeting Weekly team sync-up
Team Meeting Weekly team sync-up
TRMNL Logo Flex Wrapping Items 
<div class="flex flex--row flex--wrap gap">
  <div class="item w--40">
    <div class="meta"></div>
    <div class="content">
      <span class="title title--small">Team Meeting</span>
      <span class="description">Weekly team sync-up</span>
    </div>
  </div>
  <!-- ... -->
</div>
#

Align Content Across Lines

These only apply when wrapping is enabled.

L1
L2
L3
L4
L5
L6
L7
L8
L1
L2
L3
L4
L5
L6
L7
L8
TRMNL Logo Flex Align Content 
<div class="flex flex--row flex--wrap flex--content-between gap">
  <!-- multi-line items -->
</div>

<div class="flex flex--row flex--wrap flex--content-center gap">
  <!-- multi-line items -->
</div>
#

Main-Axis Distribution

Use flex--between, flex--around, and flex--evenly to control spacing along the main axis. This differs from gap, which inserts physical gaps between items.

#

Row Distribution

Start
Middle
End
Around
Evenly
TRMNL Logo Flex Row Distribution 
<div class="flex flex--row flex--between">...</div>
<div class="flex flex--row flex--around">...</div>
<div class="flex flex--row flex--evenly">...</div>
#

Item-Level Controls

Per-item utilities control alignment and flexing behavior without affecting siblings: self alignment, grow/shrink, flex shorthand, and basis sizing.

#

Self Alignment (align-self)

self--start
self--center
self--end
self--stretch
TRMNL Logo Flex Self Alignment 
<div class="flex flex--row h--36">
  <div class="self--start">self--start</div>
  <div class="self--center">self--center</div>
  <div class="self--end">self--end</div>
  <div class="self--stretch">self--stretch</div>
</div>
#

Grow/Shrink and Flex Shorthand

Six utilities set an item's flex behavior. The demo below shows four of them.

  • grow: the item takes a share of the spare space.
  • grow-0: the item never takes a share, the explicit opposite of grow.
  • shrink-0: the item keeps its size when the container runs tight.
  • flex-auto: the item both grows and shrinks, starting from its content size.
  • flex-initial: the item shrinks but never grows.
  • flex-none: the item does neither and stays at its content size.
grow
shrink-0
flex-none
flex-initial
TRMNL Logo Flex Grow/Shrink & Flex 
<div class="flex flex--row">
  <div class="grow">grow</div>
  <div class="shrink-0 w--36">shrink-0</div>
  <div class="flex-none w--36">flex-none</div>
  <div class="flex-initial w--36">flex-initial</div>
</div>
#

Basis and Order

Basis sets the size an item starts from before it grows or shrinks. Order moves an item to a different position without changing the markup.

basis--36
basis--20
basis--24
order--last
order--first
order--2
order---1
TRMNL Logo Flex Basis & Order 
<div class="flex flex--row">
  <div class="basis--36">basis--36</div>
  <div class="basis--20">basis--20</div>
  <div class="basis--24">basis--24</div>
</div>

<div class="flex flex--row">
  <div class="order--last">order--last</div>
  <div class="order--first">order--first</div>
  <div class="order--2">order--2</div>
  <div class="order---1">order---1</div>
</div>
#

Inline Flex Containers

Use inline-flex for inline-level flex containers that align alongside text.

Text before
Text after
TRMNL Logo Flex Inline Flex 
<span class="label">Text before</span>
<div class="inline-flex flex--row gap">
  <div>•</div>
  <div>•</div>
</div>
<span class="label">Text after</span>