
The CSS justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally).
Note: To align the items vertically use the align-items property.
Demo:
Syntax:
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;
flex-start (default) – items are positioned at the beginning of the container.
flex-end – items are positioned at the end of the container.
center – items are positioned in the center of the container.
space-between – items will have space between them.
space-around – items will have space before, between, and after them.
space-evenly – items will have equal space around them.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#content {
width: 200px;
height: 200px;
border: 3px solid #333;
display: flex;
justify-content: center;
}
.one, .two, .three {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div id="content">
<div class="one" style="background-color:#e76f51;">1</div>
<div class="two" style="background-color:#e9c46a;">2</div>
<div class="three" style="background-color:#2a9d8f;">3</div>
</div>
</body>
</html>
Output:
1
2
3
Note: Internet Explorer 10 and earlier versions do not support the justify-content property!
Enjoy coding!
Read also: