Back to Home

Flexbox Utility Classes

Ready-to-use CSS utility classes for common Flexbox patterns.

Container Utilities

These utility classes can be applied to container elements to create common Flexbox layouts.

.flex-row

Creates a flex container with items in a row (default direction). Items will be arranged horizontally from left to right.

CSS Definition:

display: flex; flex-direction: row;

Example Usage:

<div class="flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-col

Creates a flex container with items in a column. Items will be arranged vertically from top to bottom.

CSS Definition:

display: flex; flex-direction: column;

Example Usage:

<div class="flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-wrap

Creates a flex container with wrapping items. When items don't fit in one line, they'll wrap to the next line.

CSS Definition:

display: flex; flex-wrap: wrap;

Example Usage:

<div class="flex-wrap">
  <!-- Items will wrap to next line when they don't fit -->
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-center

Centers items both horizontally and vertically. Perfect for centering a single item or group of items.

CSS Definition:

display: flex; justify-content: center; align-items: center;

Example Usage:

<div class="flex-center" style="height: 200px;">
  <!-- This will be perfectly centered -->
  <div>Centered Content</div>
</div>

.flex-between

Spreads items with space between them. First item at start, last at end, equal spacing between others.

CSS Definition:

display: flex; justify-content: space-between;

Example Usage:

<div class="flex-between">
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
</div>

.flex-around

Spreads items with equal space around them. Each item has equal space on both sides.

CSS Definition:

display: flex; justify-content: space-around;

Example Usage:

<div class="flex-around">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-evenly

Distributes items with equal spacing between each item and the edges of the container.

CSS Definition:

display: flex; justify-content: space-evenly;

Example Usage:

<div class="flex-evenly">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-start

Aligns items to the start of the container (default). Items will be packed at the beginning of the main axes.

CSS Definition:

display: flex; justify-content: flex-start;

Example Usage:

<div class="flex-start">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-end

Aligns items to the end of the container. Items will be packed at the end of the main axes.

CSS Definition:

display: flex; justify-content: flex-end;

Example Usage:

<div class="flex-end">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Item Utilities

These utility classes can be applied to flex items to control their behavior within a flex container.

.flex-grow

Makes an item grow to fill available space. The item will take up any remaining space in the flex container.

CSS Definition:

flex-grow: 1;

Example Usage:

<div class="flex-row">
  <div>Fixed width</div>
  <div class="flex-grow">I will grow to fill space</div>
  <div>Fixed width</div>
</div>

.flex-grow-0

Prevents an item from growing. The item will maintain its size and not expand to fill available space.

CSS Definition:

flex-grow: 0;

Example Usage:

<div class="flex-row">
  <div class="flex-grow">I will grow</div>
  <div class="flex-grow-0">I won't grow</div>
  <div class="flex-grow">I will grow</div>
</div>

.flex-shrink

Allows an item to shrink if needed. When there's not enough space, this item will get smaller.

CSS Definition:

flex-shrink: 1;

Example Usage:

<div class="flex-row" style="width: 300px;">
  <div class="flex-shrink">I can shrink</div>
  <div>Fixed content that takes space</div>
</div>

.flex-shrink-0

Prevents an item from shrinking. The item will maintain its size even when space is limited.

CSS Definition:

flex-shrink: 0;

Example Usage:

<div class="flex-row" style="width: 300px;">
  <div class="flex-shrink-0">I won't shrink</div>
  <div>I will shrink if needed</div>
</div>

.flex-basis-auto

Sets the default size of an element to auto. The item's size will be based on its content.

CSS Definition:

flex-basis: auto;

Example Usage:

<div class="flex-row">
  <div class="flex-basis-auto">My size depends on content</div>
  <div>Other item</div>
</div>

.flex-basis-0

Sets the default size of an element to 0. The item will start with zero size before growing/shrinking.

CSS Definition:

flex-basis: 0;

Example Usage:

<div class="flex-row">
  <div class="flex-basis-0 flex-grow">Equal width</div>
  <div class="flex-basis-0 flex-grow">Equal width</div>
</div>

.flex-1

Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Makes items grow and shrink equally.

CSS Definition:

flex: 1;

Example Usage:

<div class="flex-row">
  <div class="flex-1">Equal space</div>
  <div class="flex-1">Equal space</div>
  <div class="flex-1">Equal space</div>
</div>

.flex-auto

Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: auto. Items grow/shrink based on their content.

CSS Definition:

flex: auto;

Example Usage:

<div class="flex-row">
  <div class="flex-auto">I grow based on my content</div>
  <div class="flex-auto">Me too</div>
</div>

.flex-none

Shorthand for flex-grow: 0, flex-shrink: 0, flex-basis: auto. Items won't grow or shrink.

CSS Definition:

flex: none;

Example Usage:

<div class="flex-row">
  <div class="flex-1">I will adjust</div>
  <div class="flex-none">I stay the same size</div>
</div>

Alignment Utilities

These utility classes help with alignment of items within a flex container.

.items-start

Aligns items to the start of the cross axes. Items will be aligned at the top of a row container or left of a column container.

CSS Definition:

align-items: flex-start;

Example Usage:

<div class="flex-row items-start" style="height: 100px;">
  <!-- Items will align at the top -->
  <div style="height: 30px;">Short</div>
  <div style="height: 60px;">Tall</div>
</div>

.items-center

Centers items along the cross axes. Items will be vertically centered in a row container or horizontally centered in a column container.

CSS Definition:

align-items: center;

Example Usage:

<div class="flex-row items-center" style="height: 100px;">
  <!-- Items will be vertically centered -->
  <div style="height: 30px;">Short</div>
  <div style="height: 60px;">Tall</div>
</div>

.items-end

Aligns items to the end of the cross axes. Items will be aligned at the bottom of a row container or right of a column container.

CSS Definition:

align-items: flex-end;

Example Usage:

<div class="flex-row items-end" style="height: 100px;">
  <!-- Items will align at the bottom -->
  <div style="height: 30px;">Short</div>
  <div style="height: 60px;">Tall</div>
</div>

.items-stretch

Stretches items to fill the container along the cross axes. Items will stretch vertically in a row container or horizontally in a column container.

CSS Definition:

align-items: stretch;

Example Usage:

<div class="flex-row items-stretch" style="height: 100px;">
  <!-- Items will stretch to 100px height -->
  <div>I will stretch</div>
  <div>Me too</div>
</div>

.items-baseline

Aligns items by their text baseline. Useful when you have different text sizes but want the text to align properly.

CSS Definition:

align-items: baseline;

Example Usage:

<div class="flex-row items-baseline">
  <div style="font-size: 12px;">Small text</div>
  <div style="font-size: 24px;">Large text</div>
</div>

.self-start

Aligns a single item to the start of the cross axes, overriding the container's align-items value.

CSS Definition:

align-self: flex-start;

Example Usage:

<div class="flex-row items-center" style="height: 100px;">
  <div>I'm centered</div>
  <div class="self-start">I'm at the top</div>
  <div>I'm centered</div>
</div>

.self-center

Centers a single item along the cross axes, overriding the container's align-items value.

CSS Definition:

align-self: center;

Example Usage:

<div class="flex-row items-start" style="height: 100px;">
  <div>I'm at the top</div>
  <div class="self-center">I'm centered</div>
  <div>I'm at the top</div>
</div>

.self-end

Aligns a single item to the end of the cross axes, overriding the container's align-items value.

CSS Definition:

align-self: flex-end;

Example Usage:

<div class="flex-row items-center" style="height: 100px;">
  <div>I'm centered</div>
  <div class="self-end">I'm at the bottom</div>
  <div>I'm centered</div>
</div>

.self-stretch

Stretches a single item to fill the container along the cross axes, overriding the container's align-items value.

CSS Definition:

align-self: stretch;

Example Usage:

<div class="flex-row items-center" style="height: 100px;">
  <div style="height: 50px;">Fixed height</div>
  <div class="self-stretch">I'll stretch to 100px</div>
</div>

How to Use

You can copy and paste these utility classes into your CSS file, or use them as a reference for creating your own utility classes.

/* Flexbox Container Utilities */
.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-between { display: flex; justify-content: space-between; }
.flex-around { display: flex; justify-content: space-around; }
.flex-evenly { display: flex; justify-content: space-evenly; }
.flex-start { display: flex; justify-content: flex-start; }
.flex-end { display: flex; justify-content: flex-end; }

/* Flexbox Item Utilities */
.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-basis-auto { flex-basis: auto; }
.flex-basis-0 { flex-basis: 0; }
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

/* Alignment Utilities */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

Example Usage

<!-- HTML -->
<div class="flex-center">
  <div class="flex-1">This item will grow</div>
  <div class="flex-none">This item won't grow or shrink</div>
  <div class="self-end">This item aligns itself to the end</div>
</div>

Common Patterns

Navbar Pattern

<nav class="flex-between items-center">
  <div class="logo">Logo</div>
  <div class="flex-row">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  <button class="flex-none">Sign Up</button>
</nav>

Card Grid Pattern

<div class="flex-wrap">
  <div class="card flex-col">
    <img src="image.jpg" class="flex-none" />
    <div class="flex-1">
      <h3>Card Title</h3>
      <p>Card description</p>
    </div>
    <button class="flex-none">Action</button>
  </div>
  <!-- More cards... -->
</div>

Holy Grail Layout Pattern

<div class="flex-col" style="min-height: 100vh;">
  <header class="flex-none">Header</header>
  <div class="flex-row flex-1">
    <nav class="flex-none">Navigation</nav>
    <main class="flex-1">Main Content</main>
    <aside class="flex-none">Sidebar</aside>
  </div>
  <footer class="flex-none">Footer</footer>
</div>