Introduction to CSS Flexbox
If you’ve ever tried to line up boxes or buttons on a web page and felt frustrated, Flexbox was invented for you.
CSS Flexbox (short for Flexible Box Layout) is a modern way to arrange elements in rows or columns, center things easily, and make layouts adjust nicely on different screen sizes.
In this beginner-friendly guide, you’ll learn:
- What Flexbox is and why it’s useful
- How to set up a flex container
- How to control direction, alignment, and spacing
- Simple patterns like centering and responsive rows
No prior coding experience is required. We’ll move step-by-step and you can copy, paste, and play with all the examples.
1. What is Flexbox and why should you care?
Before Flexbox, laying out items on a page often meant using hacks like floats, tables, or complicated positioning.
Flexbox gives you a clean and predictable way to:
- Place items in a row or a column
- Center items horizontally and vertically
- Control how items grow or shrink to fill space
- Create simple responsive layouts without complex math
Think of Flexbox as a smart box that automatically organizes its children (items inside it) according to the rules you set.
2. Basic setup: Your first flex container
To use Flexbox, you need two things:
- A container (a parent element)
- Items inside that container (child elements)
When you turn the container into a flex container, all direct children become flex items.
Example 1: A simple row of boxes
Create an index.html file and add this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Example 1</title>
<style>
.container {
display: flex; /* Turn this into a flex container */
border: 2px solid #333; /* Just to see the container */
padding: 10px;
gap: 10px; /* Space between items */
}
.item {
background: lightblue;
padding: 20px;
text-align: center;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
What’s happening here?
display: flex;tells the browser: “Lay out the children using Flexbox.”.itemelements become flex items and are placed next to each other in a row by default.gap: 10px;adds space between each item (this is easier than using margins).
Expected result: You’ll see three blue boxes in a row, with a little space between them, all inside a bordered container.
Try it yourself
Change the text inside each .item (for example: “Apple”, “Banana”, “Cherry”). Refresh the page and see how easily the items adjust.
3. Changing the direction: Rows vs. columns
By default, Flexbox arranges items in a row (left to right). You can change this using the flex-direction property.
row(default): items go left to rightcolumn: items go top to bottom
Example 2: Vertical stack with Flexbox
Update the CSS in your previous example:
.container {
display: flex;
flex-direction: column; /* Stack items vertically */
border: 2px solid #333;
padding: 10px;
gap: 10px;
}
What’s new?
flex-direction: column;changes the main direction from horizontal to vertical.- Now the items appear as a vertical stack, one on top of the other.
Try it yourself:
Switch between row and column and observe how the layout changes. This simple property is powerful for rearranging layouts.
4. Controlling alignment on the main axis
Flexbox has two important concepts:
- Main axis – the direction of
flex-direction(row = horizontal, column = vertical) - Cross axis – the direction perpendicular to the main axis
To control how items are spaced along the main axis, use justify-content.
Common values:
flex-start– items grouped at the startcenter– items centeredspace-between– items spread out, first at the start, last at the endspace-around– items spaced with equal space around them
Example 3: Spacing items in a row
Let’s go back to a row layout and play with justify-content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Example 3</title>
<style>
.container {
display: flex;
flex-direction: row; /* Items in a horizontal row */
justify-content: center; /* Try: flex-start, center, space-between */
border: 2px solid #333;
padding: 10px;
gap: 10px;
}
.item {
background: peachpuff;
padding: 20px 30px;
text-align: center;
border-radius: 4px;
min-width: 60px; /* So we can see spacing clearly */
}
</style>
</head>
<body>
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
</div>
</body>
</html>
What to try:
- Change
justify-contenttoflex-start,center,space-between, andspace-around. - Resize your browser window and notice how the distribution changes automatically.
This is how you create nicely spaced menus, navigation bars, or button groups without manual spacing.
5. Aligning items on the cross axis
To control alignment across the main direction (the cross axis), use align-items.
Common values:
stretch(default) – items stretch to fillcenter– items are centeredflex-start– items align to the startflex-end– items align to the end
Example 4: Centering content both ways (classic Flexbox trick)
This is one of the coolest uses of Flexbox: perfectly centering something horizontally and vertically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Centering</title>
<style>
body {
margin: 0;
}
.container {
display: flex; /* Flex container */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
height: 100vh; /* Full viewport height */
background: #f4f4f4;
}
.box {
background: lightgreen;
padding: 40px 60px;
border-radius: 8px;
font-size: 1.2rem;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">I am perfectly centered!</div>
</div>
</body>
</html>
How it works:
justify-content: center;centers the box along the main axis (horizontal by default).align-items: center;centers it along the cross axis (vertical here).height: 100vh;makes the container the full height of the browser window.
Result: Your green box sits exactly in the middle of the screen. This used to require tricky code; with Flexbox, it’s just a few lines.
Try it yourself:
Change the text inside .box, increase the padding, or change the background color. Notice how the centering still “just works.”
6. Making items flexible: grow and shrink
Flexbox can also control how items grow or shrink to fill extra space. For beginners, the most useful property is flex.
You’ll often see:
.item {
flex: 1; /* Let items grow and share space equally */
}
This means: “Each item gets an equal share of the available space.”
Example 5: Equal-width columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Columns</title>
<style>
.container {
display: flex;
gap: 10px;
padding: 10px;
}
.column {
flex: 1; /* All columns share space equally */
background: #ddeeff;
padding: 20px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="column">Column 1 content</div>
<div class="column">Column 2 content</div>
<div class="column">Column 3 content</div>
</div>
</body>
</html>
What you’ll see: Three equal-width columns that stretch to fill the entire row, even if the text inside them is different.
This is a simple way to create neat, flexible columns for features, pricing tables, or lists.
7. Try it yourself: A simple responsive header
Let’s put several ideas together to create a basic page header with a logo on the left and navigation links on the right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Header</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
display: flex;
justify-content: space-between; /* Logo left, nav right */
align-items: center; /* Vertically center items */
padding: 10px 20px;
background: #333;
color: #fff;
}
.nav {
display: flex;
gap: 15px; /* Space between links */
}
.nav a {
color: #fff;
text-decoration: none;
}
.nav a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header class="header">
<div class="logo">MySite</div>
<nav class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
</body>
</html>
What’s happening?
- The header is a flex container.
justify-content: space-between;pushes the logo to the left and the nav to the right.- The nav itself is another flex container, lining up links in a row with
gap.
This is a real-world pattern you’ll use often.
8. Recap and what’s next
You’ve just taken your first steps with CSS Flexbox and learned how to:
- Turn a container into a flex container with
display: flex; - Switch direction with
flex-direction: row | column; - Control spacing with
justify-contentandalign-items - Center elements both horizontally and vertically
- Create flexible, equal-width columns with
flex: 1; - Build a simple, practical flex-based header
If this felt like a lot, that’s normal. Flexbox is powerful, and even understanding a few key properties can dramatically improve your layouts.
Next steps:
- Experiment with the examples: change colors, text, and property values.
- Try adding more items to the containers and see how Flexbox handles them.
- Look up a Flexbox “cheat sheet” once you’re comfortable, to explore more advanced options.
Every small experiment you try builds your skills. Keep tinkering and have fun—Flexbox will soon become one of your favorite tools for layout on the web.
