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 lineflex-end
: items are packed toward to end linecenter
: items are centered along the linespace-between
: items are evenly distributed in the line; first item is on the start line, last item on the end linespace-around
: items are evenly distributed in the line with equal space around themspace-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:
Tóm Tắt
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
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 .