CSS Property justify-content

The justify-content property is a property of the Flexible Box Layout.

The justify-content property defines the alignment and distribute extra space.

Summary

Initial value: flex-start
Inherited: no
CSS Version: CSS3
JavaScript syntax: object.style.justifyContent="space-between"
Animatable: no

CSS Syntax

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Property Values

flex-start: Default value. pack items at the start
flex-end: pack items to the end
center: center items along the line
space-between: evenly distribute items
space-around: evenly distribute items with equal space
initial: sets to default value
inherit: Inherits this property from its parent element

Browser compatibility


`justify-content`	Yes	11.0	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<style>
.flex-container {<!--  w  ww.j  a v a 2s.  c o  m-->
  padding: 0;
  margin: 0;
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.flex-start { 
  -webkit-justify-content: flex-start; 
  justify-content: flex-start; 
}

.flex-end { 
  -webkit-justify-content: flex-end; 
  justify-content: flex-end; 
}  
.flex-end li {
  background: gold;
}

.center { 
  -webkit-justify-content: center; 
  justify-content: center; 
}  
.center li {
  background: deepskyblue;
}

.space-between { 
  -webkit-justify-content: space-between; 
  justify-content: space-between; 
}  
.space-between li {
  background: lightgreen;
}

.space-around { 
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
}
.space-around li {
  background: hotpink; 
}

.flex-item {
  background: red;
  padding: 5px;
  width: 60px;
  height: 50px;
  margin: 5px;
  
  line-height: 50px;
  color: white;
}
</style>
</head>
<body>
<ul class="flex-container flex-start">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

<ul class="flex-container flex-end">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

<ul class="flex-container center">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

<ul class="flex-container space-between">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

<ul class="flex-container space-around">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>
</body>
</html>

Click to view the demo