Justify-Content: Horizontal Alignment in Flexbox
If you’ve ever tried to line things up across a web page and felt stuck, you’re not alone. Laying out buttons, menus, or cards in a neat row can be tricky at first.
That’s where Flexbox and the justify-content property come in. In this article, you’ll learn how to control horizontal alignment of items using justify-content in a simple, beginner-friendly way. We’ll walk through clear examples so you can follow along, even if you’ve never written CSS before.
What is Flexbox (in simple terms)?
Flexbox (short for Flexible Box Layout) is a tool in CSS that helps you arrange items in a row or a column. Think of it like putting boxes in a row on a shelf and deciding:
- Do they all stick to the left?
- Do they spread out evenly?
- Do they sit in the center?
When you use Flexbox, you set a container (a box that holds other boxes), and then you tell the browser how to arrange the items inside it.
To turn a container into a Flexbox, you use this CSS:
.container {
display: flex; /* Turn this element into a flex container */
}
Once you’ve done that, you can use justify-content to control horizontal alignment along the main row.
What does justify-content do?
In simple terms, justify-content controls how space is used left-to-right (for a row) inside the flex container.
Some common values are:
flex-start– items stick to the leftcenter– items move to the centerflex-end– items stick to the rightspace-between– items spread out with space only between themspace-around– items have space around them (left and right)space-evenly– space between every item and the edges is equal
We’ll see each of these in action.
Tip:
justify-contentworks horizontally by default because Flexbox rows go from left to right unless you change the direction.
Getting Set Up (HTML + CSS Starter)
Let’s start with a simple example you can copy into a file.
Step 1: Create the HTML
Create a new file called flexbox-example.html and paste this inside:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox Justify-Content Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
This creates:
- A container (
divwith classcontainer) - Three items inside it (
divelements with classitem)
Step 2: Basic Flexbox Styles
Now create a styles.css file in the same folder and add:
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
border: 2px solid #333; /* Outline the container so you can see it */
padding: 10px; /* Space inside the container */
display: flex; /* Make this a flex container */
}
.item {
background: #4caf50; /* Green background */
color: white; /* White text */
padding: 10px 20px; /* Internal spacing */
margin: 5px; /* Space between items */
}
Open flexbox-example.html in your browser. You should see three green boxes in a row, aligned to the left (the default justify-content is flex-start).
Example 1: Align Everything to the Left, Center, or Right
Let’s control horizontal alignment with justify-content.
Add this inside .container in styles.css (or change it if it’s already there):
.container {
border: 2px solid #333;
padding: 10px;
display: flex; /* Flex container */
justify-content: center; /* Try flex-start, center, or flex-end */
}
Try changing the value of justify-content and refresh the page:
flex-start→ items stick to the leftcenter→ items move to the centerflex-end→ items stick to the right
What you should see
- With
flex-start, nothing special changes—they stay left-aligned. - With
center, the three boxes are grouped and centered in the container. - With
flex-end, they move as a group to the right side.
Try it yourself:
- Make the browser window wider and narrower.
- Watch how the items keep their alignment (left, center, or right) while the space changes.
Example 2: Spreading Items Across the Row
Now let’s make the items use the extra space more evenly.
Update your .container style:
.container {
border: 2px solid #333;
padding: 10px;
display: flex;
justify-content: space-between; /* Try space-between, space-around, space-evenly */
}
Try each value below and reload the page after each change:
space-between
justify-content: space-between;
- First item sticks to the left edge.
- Last item sticks to the right edge.
- The remaining items spread out between them.
space-around
justify-content: space-around;
- Each item has space on both sides.
- The spaces between items are bigger than the space at the edges.
space-evenly
justify-content: space-evenly;
- All spaces are equal: between items and at the edges.
If
space-evenlydoesn’t seem to work in very old browsers, don’t worry—most modern browsers support it.
Try it yourself:
- Switch between
space-between,space-around, andspace-evenly. - Resize the browser window and notice how the gaps grow or shrink, but keep their pattern.
Example 3: Creating a Centered Navigation Bar
Let’s use justify-content for something practical: a navigation bar.
HTML
Replace the content inside <body> in your HTML file with this:
<body>
<nav class="nav">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Contact</a>
</nav>
</body>
CSS
Add these styles to styles.css:
.nav {
display: flex; /* Make the nav a flex container */
justify-content: center; /* Center the links horizontally */
background: #222; /* Dark background */
padding: 10px 0; /* Vertical spacing */
}
.nav-item {
color: white; /* White text */
text-decoration: none; /* Remove underlines */
margin: 0 15px; /* Space between links */
font-weight: bold;
}
.nav-item:hover {
text-decoration: underline; /* Underline on hover for feedback */
}
Reload your page. You now have a simple navigation bar with centered links.
Try it yourself:
- Change
justify-content: center;tospace-between;. - Watch the first and last links move to the edges of the nav bar.
This is how many real sites arrange their menus.
Example 4: Aligning Buttons in a Card
Imagine a “card” with some text and action buttons. You might want the buttons in different horizontal positions.
HTML
Add this below your <nav> in the HTML:
<div class="card">
<h2>Welcome!</h2>
<p>Thanks for visiting this demo. Choose an action below:</p>
<div class="card-actions">
<button class="btn">Cancel</button>
<button class="btn btn-primary">Continue</button>
</div>
</div>
CSS
Add these styles:
.card {
max-width: 400px; /* Limit width of the card */
margin: 30px auto; /* Center the card on the page */
padding: 20px;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.card-actions {
display: flex; /* Flex container for buttons */
justify-content: flex-end; /* Align buttons to the right */
margin-top: 15px;
}
.btn {
padding: 8px 16px;
margin-left: 10px; /* Space between buttons */
border: 1px solid #999;
background: #f5f5f5;
cursor: pointer;
}
.btn-primary {
background: #4caf50;
color: white;
border-color: #4caf50;
}
You should now see a card with text and two buttons aligned to the right.
Try it yourself:
- Change
justify-content: flex-end;tospace-between;. - See how the
Cancelbutton moves to the left andContinueto the right. - Try
centerto have both buttons grouped in the center.
This is a very common pattern in real-world user interfaces.
Common Pitfalls (and How to Avoid Them)
- Forgetting
display: flex;:justify-contentonly works if the container is a flex container. If nothing seems to happen, check this first. - Using
justify-contenton the wrong element: Make sure you apply it to the parent of the items you want to align, not the items themselves. - Expecting vertical alignment: By default,
justify-contentcontrols horizontal alignment. For vertical alignment in a row layout, you usually usealign-items.
Quick Recap and What’s Next
You’ve just learned how to control horizontal alignment of elements using Flexbox and the justify-content property.
Key takeaways:
- Turn a container into a Flexbox with
display: flex;. - Use
justify-contentto control horizontal alignment:flex-start,center,flex-endfor grouping to one side or the middlespace-between,space-around,space-evenlyfor spreading items out
- Apply
justify-contentto the container, not the individual items.
If you followed along and saw your layouts change, that’s a big win—flex layouts are a core skill in modern web design.
Next steps:
- Experiment with different combinations of
justify-contentvalues. - Look up
align-itemsto control vertical alignment. - Try building a simple page with a header, main section, and footer, all using Flexbox.
Keep playing with the examples, tweak the values, and observe what happens. The more you experiment, the more confident you’ll become with Flexbox and layout in general.
