justify-content Archives

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:

Note: Internet Explorer 10 and earlier versions do not support the justify-content property!

Enjoy coding!