justify-content | CSS-Tricks

Posted on by mtoplistChuyên mục:Top List

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

It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

The justify-content property accepts five different values:

  • flex-start (default): items are packed toward the start line
  • flex-end: items are packed toward to end line
  • center: items are centered along the line
  • space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
  • space-around: items are evenly distributed in the line with equal space around them
  • space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

The following figure helps understand what the justify-content property actually does:

justify-content

Syntax

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

.flex-item {
  justify-content: center;
}

Demo

The following demo shows how flex items behave depending on justify-content value:

  • The red list is set to flex-start
  • The yellow is set to flex-end
  • The blue is set to center
  • The green is set to space-between
  • The pink is set to space-around
  • The light green is set to space-evenly

CodePen Embed Fallback

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome

Firefox

IE

Edge

Safari

21*

28

11

12

6.1*

Mobile / Tablet

Android Chrome

Android Firefox

Android

iOS Safari

106

105

4.4

7.0-7.1*

Blackberry browser 10+ supports the new syntax.

As of our latest December 2018 update, justify-content: space-evenly; is gaining support. There is a working draft spec on it.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome

Firefox

IE

Edge

Safari

60

52

No

79

11

Mobile / Tablet

Android Chrome

Android Firefox

Android

iOS Safari

106

105

106

11.0-11.2

For more informations about how to mix syntaxes in order to get the best browser support, please refer to our “Using Flexbox” article .

More information

mtoplist