Justify Content: These properties are applied for the alignment of items of a flexible box container if any item does not cover every available space over the main-axis, i.e., horizontally. Justify content property specifies how a browser classifies the area everywhere and between any content item.

It is not used to define items or containers inside any vertical axis. We can apply the property, i.e., align-items, for the alignment of the items vertically.

Syntax:

The flex-start value is used as a default value. Take a look at the following description:

ValuesDescription
centerAs the name suggests, it set-up an item’s position in the starting of a container.
flex-startIt is used as a default value and places an item at the starting of a container.
flex-endThis value is applied to set an item’s position at a container’s end.
space-aroundThese are applied to position any item along with parallel spacing to each other. The space-around value evenly classifies several items inside the line with the same space about them.
space-betweenBy using this value, an item is spaced evenly. Here, any first item (element) is at a starting, and any last item (element) is at an end.
space-evenlyIt places the items along with a parallel space. Although, the spacing about all the corners varies.

Take a look on the following illustration of these property values:

Example:

Output:

Justify Content

Pin It on Pinterest

Share This