justify-content
The justify-content property is used for setting a layout pattern of flex items (nested child elements) along the main axis of the flex container. The main axis is typically the horizontal axis unless you set column or column-reverse in the flex-direction property. We'll provide our explanation based on the default flex-direction setting.
flex-start
This is the default setting. With this property value, flex items are laid out from the left edge.
Note: 'edge' means the endpoint with some distance from the edge of the element based on the container's paddings and flex item's margins.
center
With this property value, flex items are laid out in the center of the parent element.
Subscribe now for
uninterrupted access.