CSS Flexbox
Imagine arranging chairs in a dining hall. If you place them manually, you have to measure the distance between each chair to make sure they are aligned. It is slow and tedious.
CSS Flexbox is like hiring a professional events coordinator. By designating a parent container as Flex, the browser automatically handles the spacing, alignment, and distribution of its child elements natively.
It is the easiest, most reliable way to align items side-by-side, space them out evenly, or center them perfectly on both axes.
In this page:
Syntax
selector {
display: flex;
flex-direction: row | column;
justify-content: value;
align-items: value;
}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.
- Accepted values:
- display: flex — block-level flex container
- display: inline-flex — inline-level flex container
- flex-direction — sets the main axis
- flex-wrap — controls wrapping
- flex-flow — shorthand for both
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.
- Accepted values:
- flex-start — packs items at the start (normal behaves like this)
- flex-end — packs items at the end
- center — centers items
- space-between — even space between items
- space-around — even space around items
- space-evenly — equal space between and around
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
- Accepted values:
- normal — initial value, behaves like stretch in flex containers
- stretch — fills the cross axis (default behavior)
- flex-start — aligns to the cross start
- flex-end — aligns to the cross end
- center — centers on the cross axis
- baseline — aligns text baselines
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
- Accepted values:
- flex-wrap: nowrap — default, single line
- flex-wrap: wrap — wraps onto more lines
- flex-wrap: wrap-reverse — wraps in reverse order
- gap: <length> | <percentage> | normal — spacing between items (normal is 0 in flex)
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
- Accepted values:
- flex-grow: <number> — share of free space to take, default 0
- flex-shrink: <number> — share of shrinkage, default 1
- flex-basis: <length> | auto | content — starting size
- flex: 1 — shorthand for 1 1 0%
- flex: none — 0 0 auto
- flex: auto — 1 1 auto
- flex: 0 1 auto — initial value
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- 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.
Chapter Summary
- 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.
Browser Support
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: