CSS Flexbox
In this page:
Setting the Flex Container
To enable Flexbox, you apply the display: flex property to your parent container. This establishes a 'Flex Container' and turns all of its direct child elements into 'Flex Items', aligning them side-by-side horizontally by default.
Note: Use the display: inline-flex property when you want your flex container to sit inline with other text elements.
Warning: Flexbox properties must be applied to the parent container to control the alignment of its child elements.
Example: Setting the Flex Container
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
margin: 4px;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
</div>Aligning on the Main Axis (justify-content)
The justify-content property controls how flex items are aligned along the main axis (horizontally by default), offering flex-start, flex-end, center, space-between, and space-around options.
Note: Use justify-content: space-between to push your brand logo and menu links to opposite ends of your header.
Warning: Failing to define a main axis path can cause elements to default to flex-start and stack on the left.
Example: Aligning on the Main Axis (justify-content)
<style>
.container {
display: flex;
justify-content: space-between;
background: #eef;
padding: 10px;
}
.container div {
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Left</div>
<div>Right</div>
</div>Aligning on the Cross Axis (align-items)
The align-items property controls how flex items are aligned along the cross axis (vertically by default), offering flex-start, flex-end, center, stretch (default), and baseline options.
Note: Use align-items: center to align vertical heights of text links and icon images side-by-side cleanly.
Warning: Baseline alignment can cause text blocks with different font sizes to align slightly offset.
Example: Aligning on the Cross Axis (align-items)
<style>
.container {
display: flex;
height: 150px;
align-items: center;
background: #eef;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Centered item</div>
</div>Wrapping and Spacing (flex-wrap & gap)
By default, flex items will try to fit onto a single line, shrinking to fit or overflowing the container if they cannot. The flex-wrap: wrap property allows items to wrap onto new lines on smaller screens, and the gap property defines a consistent spacing between them.
Note: Use the gap property to add consistent spacing between your flex items easily without needing complex margin calculations.
Warning: Failing to apply flex-wrap: wrap can cause horizontal layout overflow on mobile screens.
Example: Wrapping and Spacing (flex-wrap & gap)
<style>
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
background: #eef;
padding: 10px;
}
.container div {
background: coral;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Sizing Flex Items (grow, shrink, basis)
You can control how individual flex items shrink or grow to fill empty space using: flex-grow (how much to grow), flex-shrink (how much to shrink), and flex-basis (the default starting size of the item).
Note: Use the shorthand flex: 1; on child elements to make them grow and shrink equally to fill the available space.
Warning: If you set flex-grow on some elements but not others, the styled elements will expand to fill all empty space, pushing others to the side.
Example: Sizing Flex Items (grow, shrink, basis)
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
gap: 8px;
}
.a {
flex-grow: 1;
background: dodgerblue;
color: white;
padding: 10px;
}
.b {
flex-shrink: 1;
background: coral;
color: white;
padding: 10px;
}
.c {
flex-basis: 100px;
background: mediumseagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>
</div>- Applying flexbox alignment properties to child elements instead of the parent container.
- Forgetting to include flex-wrap: wrap on multi-column layouts, causing horizontal overflow on mobile screens.
- Setting hard-coded, non-flexible pixel widths on flex items, which prevents them from scaling proportionally.
- Enable Flexbox by applying display: flex to your parent container.
- Control horizontal alignment using justify-content, vertical alignment using align-items, and item spacing using gap.
- Allow items to wrap onto new lines on smaller screens using flex-wrap: wrap, and control item sizing using grow, shrink, and basis shorthands.
Standard CSS Flexbox display and alignment properties are supported natively by all modern web browsers.
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: