Flexbox Utilities

Powerful CSS flexbox utilities for creating flexible and responsive layouts with alignment, distribution, and ordering control.

Display Flex

Enable flexbox behavior on containers using display utilities.

Flex Item 1
Flex Item 2
Flex Item 3
HTML 
<div class="focus-d-flex">
  <div>Flex Item 1</div>
  <div>Flex Item 2</div>
  <div>Flex Item 3</div>
</div>

Inline Flex

Use .focus-d-inline-flex for inline-level flex containers.

Item 1
Item 2
Text after inline-flex
HTML 
<div class="focus-d-inline-flex">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Flex Direction

Control the direction flex items are placed in the flex container.

Row Direction

Default horizontal direction (left to right).

1
2
3
HTML 
<div class="focus-d-flex focus-flex-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Column Direction

Vertical direction (top to bottom).

1
2
3
HTML 
<div class="focus-d-flex focus-flex-column">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Flex Wrap

Control whether flex items wrap onto multiple lines.

Wrap

Allow items to wrap to new lines.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
HTML 
<div class="focus-d-flex focus-flex-wrap">
  <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>

No Wrap

Force all items to stay on a single line.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
HTML 
<div class="focus-d-flex focus-flex-nowrap">
  <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>

Justify Content

Control alignment and distribution of items along the main axis (horizontal for row, vertical for column).

Flex Start

Pack items toward the start.

1
2
3
HTML 
<div class="focus-d-flex focus-justify-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Flex End

Pack items toward the end.

1
2
3
HTML 
<div class="focus-d-flex focus-justify-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Center

Center items along the main axis.

1
2
3
HTML 
<div class="focus-d-flex focus-justify-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Space Between

Distribute items evenly with space between them.

1
2
3
HTML 
<div class="focus-d-flex focus-justify-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Space Around

Distribute items evenly with space around them.

1
2
3
HTML 
<div class="focus-d-flex focus-justify-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Align Items

Control alignment of items along the cross axis (vertical for row, horizontal for column).

Flex Start

Align items to the start of the cross axis.

Item 1
Item 2
Item 3
HTML 
<div class="focus-d-flex focus-align-start">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex End

Align items to the end of the cross axis.

Item 1
Item 2
Item 3
HTML 
<div class="focus-d-flex focus-align-end">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Center

Center items along the cross axis.

Item 1
Item 2
Item 3
HTML 
<div class="focus-d-flex focus-align-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Baseline

Align items along their text baseline.

Item 1
Item 2
Item 3
HTML 
<div class="focus-d-flex focus-align-baseline">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Stretch

Stretch items to fill the container's cross axis.

Item 1
Item 2
Item 3
HTML 
<div class="focus-d-flex focus-align-stretch">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Gap Utilities

Add spacing between flex items using gap utilities.

Gap 1
Gap 1
Gap 1
Gap 2
Gap 2
Gap 2
Gap 3
Gap 3
Gap 3
Gap 4
Gap 4
Gap 4
Gap 5
Gap 5
Gap 5
HTML 
<div class="focus-d-flex focus-gap-1">...</div>
<div class="focus-d-flex focus-gap-2">...</div>
<div class="focus-d-flex focus-gap-3">...</div>
<div class="focus-d-flex focus-gap-4">...</div>
<div class="focus-d-flex focus-gap-5">...</div>

Flex Grow and Shrink

Control how flex items grow and shrink relative to the rest of the items in the container.

Flex 1

Item grows to fill available space.

Item
Flex 1 (grows)
Item
HTML 
<div class="focus-d-flex">
  <div>Item</div>
  <div class="focus-flex-1">Flex 1 (grows)</div>
  <div>Item</div>
</div>

Flex Grow

Control whether an item can grow.

No Grow
Grow
HTML 
<div class="focus-d-flex">
  <div class="focus-flex-grow-0">No Grow</div>
  <div class="focus-flex-grow-1">Grow</div>
</div>

Flex Shrink

Control whether an item can shrink.

No Shrink
Can Shrink
HTML 
<div class="focus-d-flex">
  <div class="focus-flex-shrink-0">No Shrink</div>
  <div class="focus-flex-shrink-1">Can Shrink</div>
</div>

Align Self

Override the container's align-items value for individual flex items.

Self Start
Self Center
Self End
Self Stretch
HTML 
<div class="focus-d-flex">
  <div class="focus-align-self-start">Self Start</div>
  <div class="focus-align-self-center">Self Center</div>
  <div class="focus-align-self-end">Self End</div>
  <div class="focus-align-self-stretch">Self Stretch</div>
</div>

Align Content

Control alignment of wrapped flex lines along the cross axis. Only applies when there are multiple lines.

Space Between

Distribute lines with space between them.

1
2
3
4
5
6
HTML 
<div class="focus-d-flex focus-flex-wrap focus-align-content-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Center

Center wrapped lines in the container.

1
2
3
4
5
6
HTML 
<div class="focus-d-flex focus-flex-wrap focus-align-content-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Order Utilities

Change the visual order of flex items without changing the HTML structure.

First in DOM (order-3)
Second in DOM (order-1)
Third in DOM (order-2)
HTML 
<div class="focus-d-flex">
  <div class="focus-order-3">First in DOM (order-3)</div>
  <div class="focus-order-1">Second in DOM (order-1)</div>
  <div class="focus-order-2">Third in DOM (order-2)</div>
</div>

Order First and Last

Quickly move items to the beginning or end.

Item 1
Item 2 (last)
Item 3
Item 4 (first)
HTML 
<div class="focus-d-flex">
  <div>Item 1</div>
  <div class="focus-order-last">Item 2 (last)</div>
  <div>Item 3</div>
  <div class="focus-order-first">Item 4 (first)</div>
</div>

Practical Examples

Common layout patterns using flexbox utilities.

Centered Card

Center content both horizontally and vertically.

Perfectly Centered
HTML 
<div class="focus-d-flex focus-justify-center focus-align-center" style="min-height: 150px;">
  <div>Perfectly Centered</div>
</div>

Navigation Bar

Space-between layout for logo and navigation items.

Logo
Home
About
Contact
HTML 
<nav class="focus-d-flex focus-justify-between focus-align-center">
  <div>Logo</div>
  <div class="focus-d-flex focus-gap-3">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>
</nav>

Card with Footer

Use flex-column with flex-1 to push footer to bottom.

Header
Content (grows)
Footer
HTML 
<div class="focus-d-flex focus-flex-column" style="height: 200px;">
  <div>Header</div>
  <div class="focus-flex-1">Content (grows)</div>
  <div>Footer</div>
</div>

Quick Reference

Complete list of all flexbox utility classes.

Category Class CSS Property
Display .focus-d-flex display: flex
.focus-d-inline-flex display: inline-flex
Direction .focus-flex-row flex-direction: row
.focus-flex-column flex-direction: column
Wrap .focus-flex-wrap flex-wrap: wrap
.focus-flex-nowrap flex-wrap: nowrap
Justify Content .focus-justify-start justify-content: flex-start
.focus-justify-end justify-content: flex-end
.focus-justify-center justify-content: center
.focus-justify-between justify-content: space-between
.focus-justify-around justify-content: space-around
Align Items .focus-align-start align-items: flex-start
.focus-align-end align-items: flex-end
.focus-align-center align-items: center
.focus-align-baseline align-items: baseline
.focus-align-stretch align-items: stretch
Gap .focus-gap-1 gap: var(--focus-spacing-xs)
.focus-gap-2 gap: var(--focus-spacing-sm)
.focus-gap-3 gap: var(--focus-spacing-md)
.focus-gap-4 gap: var(--focus-spacing-base)
.focus-gap-5 gap: var(--focus-spacing-lg)
Order .focus-order-first order: -1
.focus-order-0 order: 0
.focus-order-1 order: 1
.focus-order-2 order: 2
.focus-order-3 order: 3
.focus-order-4 order: 4
.focus-order-5 order: 5
.focus-order-last order: 999