If you have ever spent hours trying to center a div or align items in a row, this CSS Flexbox tutorial is for you. Instead of drowning you in theory, we are going to build 12 real layouts you can copy, paste and tweak. By the end of this guide, you will be comfortable creating navigation bars, card grids and responsive designs using nothing but Flexbox.
What is CSS Flexbox in Simple Terms?
Flexbox (Flexible Box Layout) is a one-dimensional layout system for arranging items in a row or a column. It lets a container distribute space between its children automatically, even when their size is unknown or dynamic.
You only need to know two concepts to get started:
- Flex container: the parent element with
display: flex. - Flex items: the direct children of that container.
Setting Up Your First Flex Container
Before jumping into examples, here is the base HTML we will reuse throughout this tutorial:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>And the minimal CSS to activate Flexbox:
.container {
display: flex;
}That single line already places your items in a row. Now let’s build real things.
Example 1: Horizontal Navigation Bar
The classic use case. Items sit in a row with spacing between them.
.navbar {
display: flex;
gap: 20px;
padding: 15px;
background: #222;
}
.navbar a {
color: white;
text-decoration: none;
}Example 2: Centering Anything (Vertically and Horizontally)
The famous centering problem, solved in 3 lines:
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}justify-content handles the main axis (horizontal by default). align-items handles the cross axis (vertical by default).
Example 3: Push One Item to the Right
Perfect for a logo on the left and a login button on the right.
.header {
display: flex;
}
.login-btn {
margin-left: auto;
}Example 4: Equal Width Columns with flex-grow
Want three columns that share the space equally regardless of content?
.item {
flex: 1;
}The flex: 1 shorthand means each item grows to fill available space equally. This is one of the most useful lines in modern CSS.
Example 5: Sidebar + Main Content Layout
.layout {
display: flex;
}
.sidebar {
flex: 0 0 250px;
}
.main {
flex: 1;
}The sidebar keeps a fixed 250px width, the main content takes the rest.
Example 6: Card Grid with flex-wrap
When you want items to wrap to the next line if they do not fit:
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px;
}Each card will try to be 300px wide, grow if there is space, and wrap to a new row when needed.
Example 7: Vertical Stack (Column Direction)
.stack {
display: flex;
flex-direction: column;
gap: 10px;
}When flex-direction is set to column, the main axis becomes vertical. That means justify-content now controls vertical alignment. Implementing this cleanly is bread-and-butter for a capable development team.
Example 8: Sticky Footer
Keep the footer at the bottom even when content is short:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}Example 9: Space Between, Around and Evenly
Here is a quick reference for the most useful justify-content values:
| Value | Behavior |
|---|---|
| flex-start | Items packed at the start |
| flex-end | Items packed at the end |
| center | Items centered |
| space-between | First and last item at edges, equal gaps between |
| space-around | Equal space around each item |
| space-evenly | Equal space between and at edges |
Example 10: Reordering Items Without Touching HTML
The order property lets you rearrange items visually:
.item:nth-child(1) { order: 3; }
.item:nth-child(2) { order: 1; }
.item:nth-child(3) { order: 2; }Very handy for responsive designs where the mobile order differs from the desktop order.
Example 11: Different Alignment for a Single Item
Use align-self to override align-items for one specific item:
.container {
display: flex;
align-items: flex-start;
height: 200px;
}
.special {
align-self: center;
}Example 12: Fully Responsive Layout Without Media Queries
Combining everything we learned:
.responsive {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.responsive > * {
flex: 1 1 250px;
}On large screens, you get multiple columns. On mobile, items stack automatically. No @media queries required.
Understanding the Flex Shorthand
The flex property is a shorthand for three values:
- flex-grow: how much the item grows relative to others
- flex-shrink: how much it shrinks when space is tight
- flex-basis: the initial size before growing or shrinking
So flex: 1 1 200px means: grow equally, shrink equally, start at 200px.
Flexbox vs CSS Grid: When to Use Which?
| Use Flexbox when… | Use Grid when… |
|---|---|
| You have a single row or column | You need rows AND columns |
| Content size drives the layout | Layout drives content placement |
| Navbars, toolbars, card lists | Full page layouts, dashboards |
They are not competitors. Most modern sites use both together.
Common Mistakes to Avoid
- Forgetting that flex properties apply to direct children only.
- Using
height: 100%instead of letting Flexbox handle sizing. - Mixing up main axis and cross axis after changing
flex-direction. - Using margins for spacing instead of the modern
gapproperty.
FAQ
Is Flexbox hard to learn?
Not at all. Once you understand the container/item relationship and the main/cross axis concept, you can build 90% of common layouts within a few hours of practice.
Is Flexbox still relevant in 2026?
Absolutely. Flexbox is supported in every modern browser and remains the standard for one-dimensional layouts. It works perfectly alongside CSS Grid and container queries. It is argued more carefully on mozilla.org.
What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (horizontal by default). align-items aligns them along the cross axis (vertical by default). If you switch to flex-direction: column, their roles swap.
Can I use Flexbox for a full page layout?
Yes, but for two-dimensional layouts (rows and columns together), CSS Grid is usually cleaner. Many developers use Grid for the overall page structure and Flexbox inside components.
What does flex: 1 actually do?
It is a shorthand for flex: 1 1 0, meaning the item will grow to fill available space, shrink if needed, and start from a zero basis. This is the easiest way to create equal-width columns. For the wider picture, see A Friendly Introduction to Flexbox for Beginners.
Wrapping Up
You now have 12 real, production-ready Flexbox examples in your toolkit. The best way to master this is to open your code editor and try to break each snippet. Change values, remove properties, see what happens. Flexbox rewards experimentation more than reading.
Bookmark this CSS Flexbox tutorial and come back whenever you need a quick pattern. Happy coding from the coding4.net team. Source: https://joshwcomeau.com.