CSS justify-content Property

The justify-content CSS property specifies how flex items are aligned along the main axis of the flex container after any flexible lengths and auto margins have been resolved.

The justify-content property in CSS is used to describe the align of the flexible box container. It contains the space between and around content items along the main axis of a flex container is distributed in a browser.

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

Note: This property cannot be used to describe items or containers along the vertical axis.

CSS Syntax

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

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -