CSS Flexbox: justify-content
justify-content property controls how items are positioned along the main axis (horizontally – if
flex-direction property is set on
row). This property is applied to the flex-items after margins and
flex-grow values are calculated.
- flex-start (default)
- safe – is supported only by Firefox
- unsafe – is supported only by Firefox
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;
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.
safe – supported by Firefox
justify-content: safe center;
unsafe – supported by Firefox
justify-content: unsafe center;
- CSS Flexible Box Layout
- CSS Flexbox: flex-direction
- CSS Flexbox: flex-wrap
- CSS Flexbox: align-items
- CSS Flexbox: align-content