This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

justify-content

Summary

The justify-content property aligns flex items along the main axis of the current line of the flex container, similarly to how align-items aligns items in the cross axis.

Overview table

Initial value
flex-start
Applies to
flex containers
Inherited
No
Media
visual
Computed value
specified value
Animatable
No

CSS Object Model Property
:

Syntax

  • -ms-flex-pack: center
  • -ms-flex-pack: end
  • -ms-flex-pack: justify
  • -ms-flex-pack: start
  • justify-content: center
  • justify-content: flex-end
  • justify-content: flex-start
  • justify-content: space-around
  • justify-content: space-between

Values

flex-start
Flex items are packed toward the start of the line. The main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, and each subsequent flex item is placed flush with the preceding item.
flex-end
Flex items are packed toward the end of the line. The main-end margin edge of the last flex item is placed flush with the main-end edge of the line, and each preceding flex item is placed flush with the subsequent item.
center
Flex items are packed toward the center of the line. The flex items on the line are placed flush with each other and aligned in the center of the line, with equal amounts of empty space between the main-start edge of the line and the first item on the line and between the main-end edge of the line and the last item on the line. (If the leftover free-space is negative, the flex items will overflow equally in both directions.)
space-between
Flex items are evenly distributed in the line. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘flex-start’. Otherwise, the main-start margin edge of the first flex item on the line is placed flush with the main-start edge of the line, the main-end margin edge of the last flex item on the line is placed flush with the main-end edge of the line, and the remaining flex items on the line are distributed so that the spacing between any two adjacent items is the same.
space-around
Flex items are evenly distributed in the line, with half-size spaces on either end. If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to ‘center’. Otherwise, the flex items on the line are distributed such that the spacing between any two adjacent flex items on the line is the same, and the spacing between the first/last flex items and the flex container edges is half the size of the spacing between flex items.

Examples

An example with the justify-content property, demonstrating the different options.

.container {
  display: flex;

  width: 800px;
  height: 100px;
  background: #CCC;
}

.container div {
  flex: 0;

  height: 100px;
  margin: 0px;
  font-family: Bitter;
  font-size: 24px;
}

.third-item {
  width: 150px;
  background: #CC3333;

}

.second-item {
  width: 275px;
  background: #FFFC33;
}

.first-item {
  width: 200px;
  background: #3333FF;
}

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

.flex-end {
  justify-content: flex-end;
}

.justifycenter {
  justify-content: center;
}

.space-around {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

View live example

<p>justify-content: flex-start</p>
<div class="container flex-start">
  <div class="first-item">first-item</div>
  <div class="second-item">second-item</div>
  <div class="third-item">third-item</div>
</div>
<p>justify-content: flex-end</p>
<div class="container flex-end">
  <div class="first-item">first-item</div>
  <div class="second-item">second-item</div>
  <div class="third-item">third-item</div>
</div>
<p>justify-content: center</p>
<div class="container justifycenter">
  <div class="first-item">first-item</div>
  <div class="second-item">second-item</div>
  <div class="third-item">third-item</div>
</div>
<p>justify-content: space-around</p>
<div class="container space-around">
  <div class="first-item">first-item</div>
  <div class="second-item">second-item</div>
  <div class="third-item">third-item</div>
</div>
<p>justify-content: space-between</p>
<div class="container space-between">
  <div class="first-item">first-item</div>
  <div class="second-item">second-item</div>
  <div class="third-item">third-item</div>
</div>

Notes

This property was named flex-pack in earlier drafts.

Related specifications

CSS Flexible Box Layout Module
Candidate Recommendation

See also

Related articles

Flexbox

External resources

Also, check out the following live demo sites: