CSS justify-content attribute

Definition and Usage

The justify-content attribute (horizontal) aligns the items of the flexible container when the items do not occupy all the available space on the main axis.

Tip:Use align-items attribute Vertically aligns the items of the attribute.

See also:

CSS Tutorial:CSS flexbox

CSS Tutorial:CSS Grid

CSS 参考手册：align-content attribute

CSS 参考手册：align-items attribute

CSS 参考手册：CSS Reference Manual:

align-self propertyHTML DOM Reference Manual:

justify-content: space-between;

justifyContent property

Display elastic items with spacing before, between, and after lines:
  div {
  Align elastic items in the center of the container:
justify-content: space-around;

}

justify-content: center;

More TIY examples can be found at the bottom of the page.

CSS syntax

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

Property value Value
Default value: Description
Default value. Items are located at the beginning of the container. flex-end
Items are located at the end of the container. center
Items are located in the center of the container. space-between
Items have spacing between lines. space-around
Sets this property to its default value. See Items have space before, between, and after lines. Sets this property to its default value. SeeAnimation-related properties
Inherits this property from its parent element. See initial Inherits this property from its parent element. SeeAnimation-related properties

inherit

Technical details Default value:
flex-start Inheritance:
No Animation creation:Not supported. See:Animation-related properties
. Version:
CSS3 JavaScript syntax:

object.style.justifyContent="space-between"

justify-content: space-between;

More examples

Display elastic items with spacing before, between, and after lines:
  div {
  Align elastic items at the beginning of the container (default):
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-start;

Display elastic items with spacing before, between, and after lines:
  div {
  Align elastic items at the end of the container:
justify-content: space-around;

}

justify-content: space-between;

justify-content: flex-end;

Display elastic items with spacing before, between, and after lines:
  div {
  Display elastic items with spacing between lines:
justify-content: space-around;

}

justify-content: space-between;

Example

Display elastic items with spacing before, between, and after lines:
  div {
  display: flex;
justify-content: space-around;

}

Try it yourself

Browser support

The numbers in the table indicate the first browser version that fully supports this property, following the prefix numbers of -webkit- or -moz-.

Property Chrome IE Firefox Safari Opera
justify-content 29.0
21.0 -webkit- 		11.0 28.0
18.0 -moz- 		9.0
6.1 -webkit- 		17.0