CSS justify-content property

CSS justify-content

CSS justify-content property is used in flex containers to align the flex items.

When using CSS justify-content property free spaces must be available.

CSS justify-content property values are

  • flex-start - Items are placed at the beginning of the flex container.
  • flex-end - Items are placed at the end of the flex container.
  • start - If an element is not in a flex container, this can be used to place the item at the beginning of the container.
  • end - If an element is not in a flex container, this can be used to place the item at the end of the container.
  • center - Items are placed at the center of the container.
  • space-between - Space is evenly distributed between the elements.
  • space-around - Space is evenly distributed between the elements and its surroundings.

Example

Try Yourself