CSS Flexbox: justify-content
The justify-content property property is used on a flex container. It decides how the items inside are spaced out along the main axis – usually from left to right, unless the direction is changed (horizontally – if flex-direction property is set on row). After the browser figures out things like margins and how much space each item can grow (flex-grow values are calculated) justify-content helps decide what to do with the leftover space.
- flex-start (default)
- flex-end
- center
- space-between
- space-around
- safe – is supported only by Firefox
- unsafe – is supported only by Firefox
Syntax
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: safe center;
justify-content: unsafe center;
margin: auto
However, if any flex-item has an auto margin on the main axis the justify-content property will have no effect on that item’s position.
See the Pen CSS Flexbox justify-content, margin: auto by majadc (@majadc) on CodePen.
flex-start (default)
1
2
3
4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
flex-end
1
2
3
4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
center
1
2
3
4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
space-between
1
2
3
4
space-around
1
2
3
4
space-evenly
1
2
3
4
safe – supported by Firefox
justify-content: safe center;1
2
3
4
5
6
7
8
9
10
11
12
13
14
unsafe – supported by Firefox
justify-content: unsafe center;1
2
3
4
5
6
7
8
9
10
11
12
13
14
Related
- CSS Flexible Box Layout
- CSS Flexbox: flex-direction
- CSS Flexbox: flex-wrap
- CSS Flexbox: align-items
- CSS Flexbox: align-content