W3.CSS Flexbox Helpers
Flexbox Helper Classes
In the previous chapter, we built layouts using w3-flex and
inline CSS.
W3.CSS has helper classes for common Flexbox tasks like:
- alignment
- wrapping
- spacing
- sizing
- direction
- navigation
Helper classes make HTML shorter and easier to use.
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.
Flexible Items
The w3-flex-auto class
makes a flex item grow to fill the available space.
Without w3-flex-auto
With w3-flex-auto
Example
<div class="w3-flex w3-light-grey">
<div class="w3-blue w3-padding w3-flex-auto">Main Content</div>
<div class="w3-green w3-padding">Sidebar</div>
</div>
Try It Yourself »
Profile Card with a Gap
Alex Johnson
Frontend developer who enjoys building accessible websites.
Example
<div class="w3-flex-wrap w3-gap w3-card w3-padding">
<img src="img_avatar.png" alt="Profile" style="width:100px;border-radius:50%">
<div>
<h3>Alex Johnson</h3>
<p>Frontend developer who enjoys building websites.</p>
</div>
</div>
Try It Yourself »
The w3-flex-wrap helper wraps the text below the image if
the screen is too small.
The w3-gap helper adds space between the two items.
Navigation Bar with a Spacer
Example
<div class="w3-flex w3-dark-grey">
<a href="#" class="w3-button">Home</a>
<a href="#" class="w3-button">Products</a>
<a href="#" class="w3-button w3-flex-spacer">Login</a>
</div>
Try It Yourself »
The w3-flex-spacer class pushes the Login item to the right.
Flex Distribution
Use the distribution helpers to control space along the main axis.
| Class | Description |
|---|---|
w3-flex-start |
Creates a flex container. Aligns the items at the start. |
w3-flex-center |
Creates a flex container. Centers the items. |
w3-flex-end |
Creates a flex container. Aligns the items at the end. |
w3-flex-between |
Creates a flex container. Distributes the items with equal space between them. |
w3-flex-around |
Creates a flex container. Distributes the items with equal space around them. |
w3-flex-evenly |
Creates a flex container. Distributes the items with equal space between and around. |
Note
Start and end follow the flex direction, so they are not necessarily left and right. They can also be top and bottom
Flex Start
Creates a flex container. Aligns the items at the start.
One
2
Three
One
2
Three
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>
Try It Yourself »
Flex Center
Creates a flex container. Centers the items.
One
2
Three
One
2
Three
Examples
<h3>Start</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>
Try It Yourself »
This can alo be done with the justify-content property.
<div class="w3-flex w3-light-grey" style="justify-content:center">
<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 End
Creates a flex container. Aligns the items at the end.
One
2
Three
One
2
Three
Example
<h3>Start</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>
Try It Yourself »
Flex Between
Creates a flex container. Distributes the items with equal space between them.
One
2
Three
One
2
Three
Examples
<h3>Start</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>
Try It Yourself »
This can alo be done with the justify-content property.
<div class="w3-flex" style="justify-content:space-between">
<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 Around
Creates a flex container. Distributes the items with equal space around them.
One
2
Three
One
2
Three
Example
<h3>Start</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>
Try It Yourself »
Flex Evenly
Creates a flex container. Distributes the items with equal space between and around.
One
2
Three
One
2
Three
Example
<h3>Start</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 Alignment
The alignment helpers position flex items along the cross axis.
In a normal row layout, alignment helpers position items vertically.
With w3-flex-column, these directions are reversed.
| Class | Description |
|---|---|
w3-flex-align-start |
Creates a flex container. Aligns items at the start. |
w3-flex-align-center |
Creates a flex container. Aligns items at the center. |
w3-flex-align-end |
Creates a flex container. Aligns items at the end. |
w3-flex-align-stretch |
Creates a flex container. 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 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 »
