Responsive variations also exist for flex-direction. The following example demonstrates the result of passing the value space-around to the justify-content property.Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3 However, the space between the edges of the container and its contents (the start and end of the flex-items) is half as the space between the flex items. On passing this value to the property justify-content, the extra space is equally distributed between the flex-items such that the space between any two flex-items is the same. It will produce the following result − space-around The following example demonstrates the result of passing the value space-between to the justify-content property. On passing this value to the property justify-content, the extra space is equally distributed between the flex items such that the space between any two flex-items is the same and the start and end of the flex-items touch the edges of the container. It will produce the following result − space-between The following example demonstrates the result of passing the value flex-start to the justify-content property. On passing this value to the property justify-content, the flex-items are placed at the start of the container. Now, we will see how to use the justify-content property, with examples. Space-around − The extra space is equally distributed between the flex items such that the space between the edges of the container and its contents is half as the space between the flex-items.

Space-between − The extra space is equally distributed between the flex-items. This property accepts the following values −įlex-start − The flex-items are placed at the start of the container.įlex-end − The flex-items are placed at the end of the container.Ĭenter − The flex-items are placed at the center of the container, where the extra space is equally distributed at the start and at the end of the flex-items.

Justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly You can also adjust the alignment of the flexitems, in case they overflow the line. Using the property justify-content, you can align the contents along the main axis by distributing the extra space as intended. Often you can observe an extra space left in the container after arranging the flex items as shown below.

Justify content css flex