CSS Flexbox Intro
In this page:
What Problem Flexbox Solves
Before Flexbox, laying out elements side-by-side or centering something vertically required float hacks, negative margins, or table-based tricks that were fragile and hard to reason about. Flexbox was purpose-built as a one-dimensional layout model — a single row or a single column — and it collapses those old hacks into a handful of declarative properties. If you have ever fought with vertical-align to center something, Flexbox is the fix.
Example: What Problem Flexbox Solves
<style>
.old-center {
vertical-align: middle;
background: lightgray;
height: 60px;
padding: 10px;
margin-bottom: 10px;
}
.flex-center {
display: flex;
align-items: center;
height: 60px;
background: #eef;
}
.flex-center p {
background: dodgerblue;
color: white;
padding: 8px;
margin: 0;
}
</style>
<div class="old-center">vertical-align alone does not center a block</div>
<div class="flex-center">
<p>Centered without vertical-align hacks</p>
</div>The Flex Container
A flex container is any element with display: flex (or inline-flex) applied to it. The moment you set that, every direct child of that element automatically becomes a flex item — you do not add any class or property to the children themselves for this to happen. The container also gains a main axis and a cross axis, which every other Flexbox property references.
Example: The Flex Container
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Auto flex item</div>
<div>Auto flex item</div>
</div>The Flex Item Relationship
Flex items are laid out along the container's main axis by default, left to right, each taking only the space its content needs unless told otherwise. Because the parent-child relationship is what defines "flex item" status, nested flex containers are common: a flex item can itself be a flex container for its own children, without any conflict between the two axes.
Example: The Flex Item Relationship
<style>
.outer {
display: flex;
background: #eef;
padding: 10px;
}
.inner {
display: flex;
background: seagreen;
padding: 10px;
}
.inner div {
background: coral;
color: white;
padding: 8px;
}
</style>
<div class="outer">
<div class="inner">
<div>Nested flex item</div>
</div>
</div>Default Direction and Wrapping Behavior
Out of the box, a flex container lays items out horizontally in a single row and will shrink them to fit rather than wrap to a new line — this default surprises a lot of people building a card grid for the first time. Understanding this default is essential before reaching for flex-direction or flex-wrap, both covered in the Flex Container topic, since misreading the default is the most common first Flexbox bug.
Example: Default Direction and Wrapping Behavior
<style>
.container {
display: flex;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>When To Reach for Flexbox
Flexbox shines for one-dimensional problems — a navbar, a button group, a form row, centering a single element — where you are arranging items along one line. For genuinely two-dimensional layouts (rows AND columns that need to align together), CSS Grid, covered in its own dedicated chapter, is usually the better tool; the two are complementary, not competitors.
Example: When To Reach for Flexbox
<style>
.navbar {
display: flex;
gap: 10px;
background: #333;
padding: 10px;
}
.navbar a {
color: white;
}
</style>
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: