DEV Community

sutharrahul
sutharrahul

Posted on

Justify-content in Flex Box

Simply we can say that justify contet set items horizontal.
but with it has also few property.
.flxbox{
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;
}

Flex-star (default) :

Item are set on star (left side of page). If we use row-revers but we want that item should be start from left side. so we use justify-content: flex-start.

justify-content: flex-start;
Image description

flex-end:

Item are set on end (right side of page)
justify-content: flex-end;

Image description

flex-center:

This property set out item on center of the page
justify-content: center;

Image description

space-between:

Items are evenly distributed in the line; first item is on the start line, last item on the end line.
justify-content: space-between;

Image description

space-around:

To create evenly space around items
justify-content: space-around;

Image description

space-evenly:

Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Top comments (0)