W3.CSS Flexbox
Flexbox Layout
CSS Flexbox is a layout system for arranging items in a row or a column.
The W3.CSS w3-flex class creates a Flexbox container.
The w3-flex Class
The w3-flex class creates a flex container.
The children of the flex container become flex items.
Item 1
Item 2
Item 3
Example
<div class="w3-container w3-blue">Item 1</div>
<div class="w3-container w3-light-blue">Item 2</div>
<div class="w3-container w3-blue">Item 3</div>
</div>
The w3-flex class creates the flex container.
CSS properties control the flex container and its items.
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>1</div>
<div>2</div>
<div>3</div>
</div>
Flex Gaps
The CSS gap property adds space between flex items.
1
2
3
Example
<div>1</div>
<div>2</div>
<div>3</div>
</div>
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>Wrapping Item 1</div>
<div>Wrapping Item 2</div>
<div>Wrapping Item 3</div>
<div>Wrapping Item 4</div>
</div>
Resize the browser window to see the flex items wrap.
Horizontal Alignment
The justify-content property controls how items are positioned along the flex direction.
1
2
3
Example
<div>1</div>
<div>2</div>
<div>3</div>
</div>
The space-between value places space between the items:
1
2
3
Example
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Vertical Alignment
Use the align-items property to control how flex items are aligned vertically.
1
2
3
Example
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Perfect Centering
Flexbox makes it easy to center content both horizontally (justify-content:center)
and vertically (align-items:center).
Centered
Example
<div class="w3-container w3-blue">Centered</div>
</div>
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 style="order:3">1</div>
<div style="order:2">2</div>
<div style="order:1">3</div>
</div>
The flex Property
The CSS flex property controls how much available space a flex item uses.
Fixed
Flexible
Example
<div>Fixed</div>
<div style="flex:1">Flexible</div>
</div>
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 style="flex:1">1</div>
<div style="flex:1">2</div>
</div>
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 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>
The flex-grow Property
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 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
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>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
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 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>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>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>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>1</div>
<div>2</div>
<div style="align-self:flex-end">3</div>
<div>4</div>
</div>
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>Home</div>
<div>Products</div>
<div style="margin-left:auto">Login</div>
</div>
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
<h3>Become Certified</h3>
<p>Learn the material and test your skills.</p>
<button style="margin-top:auto">
Get Certified
</button>
</div>
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.
MySite
Example
<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>
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.
What You Have Learned
w3-flexcreates a Flexbox container- The children of a flex container become flex items
flex-directioncontrols the directiongapadds space between flex itemsflex-wrapallows items to wrapjustify-contentaligns items along the flex directionalign-itemsaligns items across the flex directionflexcontrols how flex items use available spaceorderchanges the visual order of an itemalign-selfaligns one flex item independently- Automatic margins can push flex items to the edge of the container
More Examples
Explore more ways to use w3-flex.
Reverse Flex Direction
Examples
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.