码农教程 - 一技在手,衣食无忧! tools

目录

CSS justify-content Property

❮ Previous Complete CSS Reference Next ❯

Example

Align the flex items at the center of the container:

div {
  display: flex;
  justify-content: center;
}
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).

Tip: Use the align-items property to align the items vertically.

Note: The justify-content property can also be used on a grid container to align grid items in the inline direction. For pages in English, inline direction is left to right and block direction is downward.

Show demo ❯

Default value: flex-start
Inherited: no
Animatable: no. Read about animatable
Version: CSS3
JavaScript syntax: object.style.justifyContent="space-between" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
justify-content 29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0

CSS Syntax

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

Property Values

Value Description Play it
flex-start Default value. Items are positioned at the beginning of the container Demo ❯
flex-end Items are positioned at the end of the container Demo ❯
center Items are positioned in the center of the container Demo ❯
space-between Items will have space between them Demo ❯
space-around Items will have space before, between, and after them Demo ❯
space-evenly Items will have equal space around them Demo ❯
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Align the flex items at the beginning of the container (this is default):

div {
  display: flex;
  justify-content: flex-start;
}
Try it Yourself »

Example

Align the flex items at the end of the container:

div {
  display: flex;
  justify-content: flex-end;
}
Try it Yourself »

Example

Display the flex items with space between the lines:

div {
  display: flex;
  justify-content: space-between;
}
Try it Yourself »

Example

Display the flex items with space before, between, and after the lines:

div {
  display: flex;
  justify-content: space-around;
}
Try it Yourself »

Example with grid

Display the grid items to the end:

#container {
 display: grid;
 justify-content: end;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS flexbox

CSS tutorial: CSS grid

CSS Reference: align-content property

CSS Reference: align-items property

CSS Reference: align-self property

HTML DOM reference: justifyContent property


❮ Previous Complete CSS Reference Next ❯