CSS justify-content Property
Along the main axis (horizontally), flex items are positioned by justify-content.
You can give it any one of these values:
centerflex-start(default)flex-endspace-aroundspace-betweenspace-evenly
Center
With center, the flex items gather in the middle of the container.
Prompt
Create a flex container with three numbered items (1, 2, 3) and use justify-content: center to align them in the center of the container. Style the container with a light gray background and the items with a distinct background color and some padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox justify-content: center</title>
<style>
.flex-container {
display: flex;
justify-content: center;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: center</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Flex-start
You get flex-start without setting anything, since it is the default: the flex items line up from the beginning of the container.
Prompt
Create a flex container with three numbered items (1, 2, 3) and use justify-content: flex-start to align them at the beginning of the container. Style the container with a light gray background and the items with a distinct background color and some padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox justify-content: flex-start</title>
<style>
.flex-container {
display: flex;
justify-content: flex-start;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: flex-start</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Flex-end
Using flex-end pushes the flex items to the far end of the container.
Prompt
Create a flex container with three numbered items (1, 2, 3) and use justify-content: flex-end to align them at the end of the container. Style the container with a light gray background and the items with a distinct background color and some padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox justify-content: flex-end</title>
<style>
.flex-container {
display: flex;
justify-content: flex-end;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: flex-end</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Space-around
In space-around, each flex item has space before and after it, and therefore between its neighbors too.
Prompt
Create a flex container with three numbered items (1, 2, 3) and use justify-content: space-around to display them with equal space around each item. Style the container with a light gray background and the items with a distinct background color and some padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox justify-content: space-around</title>
<style>
.flex-container {
display: flex;
justify-content: space-around;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: space-around</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Space-between
With space-between, the first item sits at the start, the last at the end, and the remaining space goes between the items.
Prompt
Create a flex container with three numbered items (1, 2, 3) and use justify-content: space-between to display them with equal space between the items. Style the container with a light gray background and the items with a distinct background color and some padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox justify-content: space-between</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: space-between</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
Space-evenly
Under space-evenly, the gaps around and between the flex items are all equal.
Prompt
Create a flex container with three numbered items (1, 2, 3) and use justify-content: space-evenly to display them with equal space around and between each item. Style the container with a light gray background and the items with a distinct background color and some padding.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox justify-content: space-evenly</title>
<style>
.flex-container {
display: flex;
justify-content: space-evenly;
background-color: #f1f1f1;
padding: 10px;
}
.flex-container > div {
background-color: #4CAF50;
color: white;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>justify-content: space-evenly</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>