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.
CSS justify-content property.
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
|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|
|Value||flex-start | flex-end | center | space-between | space-around|
|Computed Value||Same as declared value.|