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.
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 »
Flex Direction
Flex items are displayed in a row by default.
1
2
3
Use the CSS flex-direction property to change the direction of the flex items:
1
2
3
Example
<div class="w3-flex" style="flex-direction:column">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Try it Yourself »
The w3-flex class creates the flex container.
The CSS property flex-direction:column controls the direction of the flex items.
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="https://www.w3schools.com/howto/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 »
Useful Flexbox Properties
| Property | What it does |
|---|---|
align-items:center | Aligns items across the row |
justify-content:space-between | Spreads items apart |
flex-wrap:wrap | Moves items to new rows |
flex:1 | Lets an item grow |
gap:16px | Adds space between items |
For a complete explanation of these CSS properties, see the CSS Flexbox Tutorial.
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.
Home
Products
Login
Example
<div class="w3-flex">
<div>Home</div>
<div>Products</div>
<div 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.
Horizontal Alignment
The justify-content property controls how items are positioned along the flex direction.
1
2
3
Example
<div class="w3-flex" style="justify-content:center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Try it Yourself »
The space-between value places space between the items:
1
2
3
Example
<div class="w3-flex" style="justify-content:space-between">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Try it Yourself »
Vertical Alignment
Use the align-items property to control how flex items are aligned vertically.
1
2
3
Example
<div class="w3-flex" style="height:150px;align-items:center">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Try it Yourself »
Perfect Centering
Flexbox makes it easy to center content both horizontally (justify-content:center)
and vertically (align-items:center).
Centered
Example
<div class="w3-flex" style="height:200px;justify-content:center;align-items:center">
<div class="w3-container w3-blue">Centered</div>
</div>
Try it Yourself »
Flex Items
The children of a flex container are called flex items.
Item 1
Item 2
Item 3
Flex items can:
- Grow
- Shrink
- Change size
- Change order
- Align independently
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 is a shorthand for flex-grow, flex-shrink, and flex-basis.
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.
More justify-content Values
| Value | Description |
|---|---|
| flex-start | Items are placed at the start |
| flex-end | Items are placed at the end |
| center | Items are centered |
| space-between | Space is placed between the items |
| space-around | Space is placed around the items |
| space-evenly | Equal space is placed around the items |
More align-items Values
| Value | Description |
|---|---|
| stretch | Items stretch to fill the container |
| flex-start | Items are aligned at the start |
| flex-end | Items are aligned at the end |
| center | Items are centered |
| baseline | Items are aligned by their text baseline |
CSS Flexbox Properties
The w3-flex class creates a CSS Flexbox container.
Standard CSS properties can then control the container and its flex items:
| Property | Description |
|---|---|
| flex-direction | Defines the direction of flex items |
| flex-wrap | Defines whether flex items can wrap |
| flex-flow | Defines direction and wrapping |
| gap | Defines the gap between flex items |
| justify-content | Aligns items along the main axis |
| align-items | Aligns items along the cross axis |
| align-content | Aligns multiple lines of flex items |
| flex | Defines how a flex item grows, shrinks, and starts |
| flex-grow | Defines how much an item can grow |
| flex-shrink | Defines how much an item can shrink |
| flex-basis | Defines the starting size of an item |
| order | Defines the visual order of an item |
| align-self | Defines the alignment of one item |
For a complete description of CSS Flexbox, see the CSS Flexbox Tutorial.
