W3.CSS Flexbox Helpers
W3.CSS 6 expands Flexbox with helper classes for alignment, wrapping, spacing, sizing, direction, and navigation.
The w3-flex class creates a basic flex container.
Most Flexbox helper classes also create a flex container, so you do not need to add w3-flex separately.
Note
W3.CSS flexbox helpers are a version 6 feature.
Version 6 is now in final beta, and is expected to be released in November 2026.
Flex Alignment
The alignment helpers position flex items along the cross axis.
In a normal row layout, alignment helpers position items vertically.
Distribution helpers position items and distribute space horizontally.
With w3-flex-column, these directions are reversed.
| Class | Description |
|---|---|
w3-flex-align-start |
Aligns items at the start. |
w3-flex-align-center |
Aligns items at the center. |
w3-flex-align-end |
Aligns items at the end. |
w3-flex-align-stretch |
Stretches items across the cross axis when their size is automatic. |
Example
<h3>Align Start</h3>
<div class="w3-flex-align-start w3-light-grey" style="height:120px">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Align Center</h3>
<div class="w3-flex-align-center w3-light-grey" style="height:120px">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Align End</h3>
<div class="w3-flex-align-end w3-light-grey" style="height:120px">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Align Stretch</h3>
<div class="w3-flex-align-stretch w3-light-grey" style="height:120px">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
Try It Yourself »
Flex Distribution
Use the distribution helpers to control space along the main axis.
Example
<h3>Start</h3>
<div class="w3-flex-start w3-light-grey">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Center</h3>
<div class="w3-flex-center w3-light-grey">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>End</h3>
<div class="w3-flex-end w3-light-grey">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Space Between</h3>
<div class="w3-flex-between w3-light-grey">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Space Around</h3>
<div class="w3-flex-around w3-light-grey">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Space Evenly</h3>
<div class="w3-flex-evenly w3-light-grey">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
Try It Yourself »
Wrapping and Gaps
The w3-flex-wrap class allows flex items to wrap onto new lines.
The gap helpers control the space between flex items.
w3-gap-smallis 8pxw3-gapis 16pxw3-gap-largeis 24px
Example
<h3>Small Gap</h3>
<div class="w3-flex-wrap w3-gap-small">
<div class="w3-container w3-red" style="width:180px">One</div>
<div class="w3-container w3-green" style="width:180px">Two</div>
<div class="w3-container w3-blue" style="width:180px">Three</div>
<div class="w3-container w3-orange" style="width:180px">Four</div>
</div>
<h3>Normal Gap</h3>
<div class="w3-flex-wrap w3-gap">
<div class="w3-container w3-red" style="width:180px">One</div>
<div class="w3-container w3-green" style="width:180px">Two</div>
<div class="w3-container w3-blue" style="width:180px">Three</div>
<div class="w3-container w3-orange" style="width:180px">Four</div>
</div>
<h3>Large Gap</h3>
<div class="w3-flex-wrap w3-gap-large">
<div class="w3-container w3-red" style="width:180px">One</div>
<div class="w3-container w3-green" style="width:180px">Two</div>
<div class="w3-container w3-blue" style="width:180px">Three</div>
<div class="w3-container w3-orange" style="width:180px">Four</div>
</div>
Try It Yourself »
Flex Direction and Sizing
| Class | Description |
|---|---|
w3-flex-1 |
Grows and shrinks from a zero starting size. |
w3-flex-auto |
Grows and shrinks from its content or specified size. |
w3-flex-none |
Does not grow or shrink. |
w3-flex-shrink-0 |
Prevents shrinking. |
w3-flex-spacer |
Uses an automatic start margin to push the item toward the end. |
The w3-flex-column class creates a vertical flex layout.
Use the sizing helpers to control how flex items grow or keep their natural width.
Example
<h3>Flex Column</h3>
<div class="w3-flex-column w3-gap">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Flexible Widths</h3>
<div class="w3-flex w3-gap">
<div class="w3-container w3-red w3-flex-1">w3-flex-1</div>
<div class="w3-container w3-green w3-flex-1">w3-flex-1</div>
<div class="w3-container w3-blue w3-flex-auto">w3-flex-auto</div>
<div class="w3-container w3-orange w3-flex-none">w3-flex-none</div>
</div>
Try It Yourself »
Flex Sidebar Layout
The w3-flex-shrink-0 class prevents the sidebar from shrinking.
Example
<div class="w3-flex" style="min-height:280px">
<nav class="w3-bar-block w3-light-grey w3-flex-shrink-0" style="width:200px">
<a class="w3-bar-item w3-button" href="#">Home</a>
<a class="w3-bar-item w3-button" href="#">News</a>
<a class="w3-bar-item w3-button" href="#">Contact</a>
</nav>
<main class="w3-container w3-flex-1">
<h2>Main Content</h2>
<p>The sidebar keeps its width while the main content grows.</p>
</main>
</div>
Try It Yourself »
Flex Navigation Bar
The w3-flex-align-center class creates a flex container and vertically centers its items.
The w3-flex-spacer class pushes the Login link to the end.
Example
<div class="w3-flex-align-center w3-dark-grey">
<div class="w3-container">
<h4>MySite</h4>
</div>
<a class="w3-button" href="#">Home</a>
<a class="w3-button" href="#">About</a>
<a class="w3-button w3-flex-spacer" href="#">Login</a>
</div>
Try It Yourself »
Flexbox RTL
Flexbox works naturally with RTL layouts.
The w3-flex-spacer class uses logical spacing, so it follows the text direction automatically.
Example
<body class="w3-rtl">
<div class="w3-flex-align-center w3-light-grey">
<div class="w3-container">
<b>موقعي</b>
</div>
<a class="w3-button" href="#">الرئيسية</a>
<a class="w3-button" href="#">حول</a>
<a class="w3-button w3-flex-spacer" href="#">دخول</a>
</div>
</body>
Try It Yourself »
