7.1 The justify-content Property
Flexbox gives you some sweet tools for handling alignment and distributing space between elements within a Flex container. One of the key properties for this is justify-content, which deals with alignment of Flex items along the main axis.
The justify-content property specifies how the Flex items are distributed along the main axis of the Flex container. The main axis direction depends on the flex-direction: value.
- If
flex-directionis set toroworrow-reverse, the main axis will be horizontal - If
flex-directionis set tocolumnorcolumn-reverse, the main axis will be vertical
Values:
flex-start: items are aligned at the start of the container (default value)flex-end: items are aligned at the end of the containercenter: items are centered inside the containerspace-between: items are evenly distributed with equal spaces between themspace-around: items are evenly distributed with spaces around themspace-evenly: items are evenly distributed with equal spaces between them and at the container edges
Example usage:
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-start {
justify-content: flex-start;
}
<div class="container flex-start">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
7.2 justify-content Values
1. flex-start
With the flex-start value, items are aligned at the start of the Flex container, meaning the left side if the main axis is horizontal (row), or the top side if the main axis is vertical (column).
Example:
.container {
display: flex;
justify-content: flex-start;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
2. flex-end
With the flex-end value, items are aligned at the end of the Flex container, meaning the right side if the main axis is horizontal (row), or the bottom if the main axis is vertical (column).
Example:
.container {
display: flex;
justify-content: flex-end;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
3. center
With the center value, items are centered inside the Flex container. This value is great for creating centered layouts.
Example:
.container {
display: flex;
justify-content: center;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
4. space-between
With the space-between value, items are evenly distributed along the main axis with equal spaces between them. The first item is aligned at the start of the container and the last item at the end.
Example:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
5. space-around
With the space-around value, items are evenly distributed with spaces around them. The spaces between items will be twice as large as the spaces at the container's edges.
Example:
.container {
display: flex;
justify-content: space-around;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
6. space-evenly
With the space-evenly value, items are evenly distributed with equal spaces between them and around the container edges. This value ensures equal spacing throughout the container.
Example:
.container {
display: flex;
justify-content: space-evenly;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
7.3 Centering a Menu
Real-world usage example—centering a navigation menu:
.nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-item:hover {
background-color: #575757;
}
<nav class="nav">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About Us</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Contact</a>
</nav>
Explanation of the code:
.nav: Flex container for the navigation menu with items centered.nav-item: Flex items (links) with basic styling
GO TO FULL VERSION