HTML
Structure your web pages.
W3.CSS Flexbox
Flexbox Layout
Flexbox containers help arrange elements in rows or columns. This is especially useful when elements need to align, grow, or wrap to a new line.
The W3.CSS w3-flex class creates a Flexbox container.
In this chapter
Build practical layouts using w3-flex and standard CSS properties.
The next chapter shows how W3.CSS 6 makes many of these layouts shorter.
The w3-flex Class
The w3-flex class creates a flex container.
The children of the flex container become flex items.
Flex items are displayed in a row by default.
Item 1
2
Item 3
Example
<div class="w3-flex">
<div class="w3-container w3-blue">Item 1</div>
<div class="w3-container w3-light-blue">2</div>
<div class="w3-container w3-blue">Item 3</div>
</div>
Try it Yourself »
The w3-flex-column Class
The w3-flex-columnclass creates a flex container
with the flex items arranged in a column.
Item 1
2
Item 3
Example
<div class="w3-flex" style="flex-direction:column">
<div class="w3-container w3-blue">Item 1</div>
<div class="w3-container w3-light-blue">2</div>
<div class="w3-container w3-blue">Item 3</div>
</div>
Try it Yourself »
The w3-flex class creates a flex container with
items in a row.
The w3-flex-column class creates the flex container with
items in a column.
Flex Gaps
The CSS gap property adds space between flex items.
1
2
3
Example
<div class="w3-flex" style="gap:16px">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Try it Yourself »
The w3-flex class creates the flex container.
The CSS property gap:16px controls the gap between flex items.
Wrapping Flex Items
Flex items stay on one line by default.
Use flex-wrap:wrap to allow items to move to a new line.
Wrapping Item 1
Wrapping Item 2
Wrapping Item 3
Wrapping Item 4
Example
<div class="w3-flex" style="flex-wrap:wrap;gap:8px">
<div>Wrapping Item 1</div>
<div>Wrapping Item 2</div>
<div>Wrapping Item 3</div>
<div>Wrapping Item 4</div>
</div>
Try it Yourself »
The w3-flex class creates the flex container.
The CSS property flex-wrap:wrap controls the wrapping of flex items.
Resize the browser window to see the flex items wrap.
Profile Card: Image Beside Text
Alex Johnson
Frontend developer who enjoys building accessible websites.
A profile card combines an avatar and description.
flex-wrap:wrap allows the text to move below the image on a narrow screen.
Example
<div class="w3-flex w3-card" style="align-items:center;gap:16px;flex-wrap:wrap">
<img src="img_avatar.png" alt="Profile" style="width:100px;border-radius:50%">
<div style="flex:1 1 180px">
<h3>Alex Johnson</h3>
<p>Frontend developer who enjoys building accessible websites.</p>
</div>
</div>
Try It Yourself »
Search Field and Button
Let the input grow to fill the remaining space before the search button.
Example
<form class="w3-flex" action="#" style="gap:8px">
<input class="w3-input w3-border" type="search" name="q" placeholder="Search" style="flex:1">
<button class="w3-button w3-green" type="submit">Search</button>
</form>
Try It Yourself »
Flexible Course Cards
CSS
Style your web pages.
JavaScript
Make pages interactive.
With flex-wrap:wrap and flex:1 1 220px, cards wrap when the screen becomes narrow. Their widths adjust automatically.
Example
<div class="w3-flex" style="flex-wrap:wrap;gap:16px">
<article class="w3-card w3-container" style="flex:1 1 220px">
<h3>HTML</h3><p>Structure your web pages.</p>
</article>
<article class="w3-card w3-container" style="flex:1 1 220px">
<h3>CSS</h3><p>Style your web pages.</p>
</article>
<article class="w3-card w3-container" style="flex:1 1 220px">
<h3>JavaScript</h3><p>Make pages interactive.</p>
</article>
</div>
Try It Yourself »
Footer at the Bottom
A vertical flex layout can push the footer down on a short page.
Give the middle section flex:1.
Example
<div class="w3-flex" style="flex-direction:column;min-height:60vh">
<header class="w3-container w3-blue"><h3>MySite</h3></header>
<main class="w3-container" style="flex:1"><p>A short page.</p></main>
<footer class="w3-container w3-dark-grey"><p>Footer at the bottom</p></footer>
</div>
Try It Yourself »
Want to Write Less CSS?
W3.CSS 6 introduces Flexbox helper classes.
You can center items, wrap cards, add gaps, and push a button to the right without writing the same inline CSS each time.
For example, style="align-items:center"
becomes class="w3-flex-align-center".
Push an Item to the End
Automatic margins are very useful inside a flex container.
Use style="margin-left:auto" to push an item to the end.
Example
<div class="w3-flex w3-dark-grey">
<div class="w3-button">Home</div>
<div class="w3-button">Products</div>
<div class="w3-button" style="margin-left:auto">Login</div>
</div>
Try it Yourself »
Push an Item to the Bottom
With a vertical flex container, margin-top:auto pushes an item to the bottom.
Become Certified
Learn the material and test your skills.
Example
<div class="w3-flex" style="height:250px;flex-direction:column">
<h3>Become Certified</h3>
<p>Learn the material and test your skills.</p>
<button style="margin-top:auto">
Get Certified
</button>
</div>
Try it Yourself »
Automatic margins use the available free space inside a flex container.
Build a Navigation Bar
The w3-flex class is perfect for arranging navigation items in one row.
Example
<div class="w3-flex w3-dark-grey" style="align-items:center">
<div class="w3-container">MySite</div>
<a class="w3-button">Home</a>
<a class="w3-button">About</a>
<a class="w3-button">Contact</a>
<a class="w3-button" style="margin-left:auto">Login</a>
</div>
Try it Yourself »
Note
The w3-flex class is useful when you need control over the spacing,
alignment, and sizing of navigation items.
But, for a traditional navigation bar or toolbar, we recommend the W3.CSS Navigation bar which is designed specifically for that purpose.
Flex Item CSS Properties
These are the most common properties used for flex items:
orderflexflex-growflex-shrinkflex-basisalign-self
Flex Items Order
The CSS order property changes the visual order of a flex item.
1
2
3
Example
<div class="w3-flex">
<div style="order:3">1</div>
<div style="order:2">2</div>
<div style="order:1">3</div>
</div>
Try it Yourself »
The flex Property
The CSS flex property controls how much available space a flex item uses.
Fixed
Flexible
Example
<div class="w3-flex">
<div>Fixed</div>
<div style="flex:1">Flexible</div>
</div>
Try it Yourself »
flex:1 makes an item use the available space.
Flexible Columns
With style="flex:1", two flex items can share the available width.
1
1
Example
<div class="w3-flex">
<div style="flex:1">1</div>
<div style="flex:1">2</div>
</div>
Try it Yourself »
With style="flex:2", one item can be made twice as flexible as the other.
1
2
With style="flex:3", one item can be made three times as flexible as the other.
1
2
Example
<div class="w3-flex">
<div style="flex:1">1</div>
<div style="flex:2">2</div>
</div>
<div class="w3-flex">
<div style="flex:1">1</div>
<div style="flex:3">2</div>
</div>
Try it Yourself »
The flex-grow Property
flex-grow: 8;
The flex-grow property controls how much an item can grow compared with the other items.
The default value is 0.
1
2
3
Example
Make the second flex item grow 8 times faster than the other flex items:
<div class="w3-flex">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 8">2</div>
<div style="flex-grow:
1">3</div>
</div>
The flex-shrink Property
style="flex-shrink: 0"
The flex-shrink property controls how much an item can shrink when there is not enough space.
The default value is 1.
1
2
3
4
5
6
7
8
9
10
Example
Do not let the third flex item shrink as much as the other flex items:
<div class="w3-flex">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
style="flex-shrink:0" prevents the flex item from shrinking.
The flex-basis Property
flex-basis: 200px;
The flex-basis property specifies the initial length of a flex item.
200px
auto
auto
auto
Example
Set the initial length of the first flex item to 200 pixels:
<div class="w3-flex">
<div style="flex-basis: 200px">200px</div>
<div>auto</div>
<div>auto</div>
<div>auto</div>
</div>
The flex Property
The flex property is a shorthand property for the
flex-grow, flex-shrink, and flex-basis properties.
Example
Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:
<div class="w3-flex">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
The align-self Property
The align-self property specifies the
alignment for the selected item inside the flexible container.
The align-self property overrides the default alignment set by the
container's align-items property.
1
2
3
4
5
In these examples we use a 200 pixels high container, to better demonstrate the
align-self property:
Examples
Align the third flex item in the middle of the container:
<div class="w3-flex">
<div>1</div>
<div>2</div>
<div style="align-self:center">3</div>
<div>4</div>
</div>
Align the third flex item at the top of the container:
<div class="w3-flex">
<div>1</div>
<div>2</div>
<div style="align-self:flex-start">3</div>
<div>4</div>
</div>
Align the third flex item at the bottom of the container:
<div class="w3-flex">
<div>1</div>
<div>2</div>
<div style="align-self:flex-end">3</div>
<div>4</div>
</div>
Flexbox vs Grid
Flexbox and Grid are both modern CSS layout systems.
| Layout | Best For |
|---|---|
| Flexbox | Arranging items mainly in one direction |
| Grid | Layouts with rows and columns |
Use Flexbox when items mainly need to be arranged in a row or a column.
Use Grid when the layout needs to work in two dimensions.
You will learn about w3-grid in the next chapter.
Reverse Flex Direction
Examples
flex-direction: row-reverse;
Try it Yourself »
flex-direction: column-reverse;
Try it Yourself »
The flex-flow Property
The flex-flow property is shorthand for flex-direction and flex-wrap.
CSS Flexbox Properties
The w3-flex class creates a CSS Flexbox container.
Many CSS properties can then control the container and its flex items:
| Property | Description | |
|---|---|---|
| align-content:center | Aligns multiple lines of flex items in the center | Try it |
| align-content:flex-end | Aligns multiple lines of flex items at the end | Try it |
| align-content:flex-start | Aligns multiple lines of flex items at the start | Try it |
| align-content:space-around | Aligns multiple lines of flex items with space around | Try it |
| align-content:space-between | Aligns multiple lines of flex items with space between | Try it |
| align-content:space-evenly | Aligns multiple lines of flex items spaced evenly | Try it |
| align-content:stretch | Aligns multiple lines of flex items stretched | Try it |
| align-self:center | The items are centered in the container | Try it |
| align-self:flex-end | Alignes an item at the end | Try it |
| align-self:flex-start | Alignes an item at the start | Try it |
| align-items:baseline | The items are aligned by their baseline in the container | Try it |
| align-items:center | The items are centered in the container | Try it |
| align-items:flex-end | The items are aligned at the end | Try it |
| align-items:normal | The items are displayed normal in the container | Try it |
| align-items:flex-start | The items are aligned at the start | Try it |
| align-items:stretch | The items are stretched to fill the container | Try it |
| flex | Defines how a flex item grows, shrinks, and starts | Try it |
| flex-basis | Defines the starting size of an item | Try it |
| flex-direction:column | Defines the direction of flex items | Try it |
| flex-direction:column-reverse | Defines the direction of flex items | Try it |
| flex-direction:row | Defines the direction of flex items | Try it |
| flex-direction:row-reverse | Defines the direction of flex items | Try it |
| flex-flow | Shorthand for flex-direction and flex-wrap | Try it |
| flex-grow | Defines how much an item can grow | Try it |
| flex-shrink | Defines how much an item can shrink | Try it |
| flex-wrap:nowrap | Defines that flex items can not wrap | Try it |
| flex-wrap:reverse | Defines how flex items wrap | Try it |
| flex-wrap:wrap | Defines that flex items can wrap | Try it |
| gap | Defines the gap between flex items | Try it |
| justify-content:center | Aligns items at the center of the main axis | Try it |
| justify-content:flex-end | Aligns items at the end of the main axis | Try it |
| justify-content:flex-start | Aligns items at the start of the main axis | Try it |
| justify-content:space-around | Aligns items at the start of the main axis | Try it |
| justify-content:space-between | Aligns items at the start of the main axis | Try it |
| justify-content:space-evenly | Aligns items at the start of the main axis | Try it |
| order | Defines the visual order of a flex item | Try it |
