Search within TutorialsPark

CSS3 justify-content Property


To set spaces in between and around elements


Definition and Notes.

1. The CSS3 justify-content property is used define how available space is distributed in between and around the items aligned on the main-axis within the flex container.

2. The alignment properties are applied after length and auto margins are applied.


Syntax:

CSS justify-content property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note-Even if there is one item with flex-grow value other than 0, no properties will be applied, as no empty space would be available

Property Values

Value Description
flex-start Flex Items are laid towards the start of the main axis.Its the default
flex-end Flex Items are laid towards the end of the main axis
center Flex items are laid in the center of the container
space-between Flex items are evenly laid out on the Main axis, with first and last item against the edge
space-around Flex items are evenly laid out on the main axis, with half-size spaces at each end of the axis
inherit The values are inherited from the parent element

Specifications

Specs Value
Name justify-content
Value flex-start | flex-end | center | space-between | space-around
Initial Value flex-start
Applies to flex-containers
Javascript syntax object.style.justifyContent="flex-end"
Inherited No
Computed Value Same as declared value.
Browser Support internetexplorer safari firefox opera chrome

Related Examples.