Before reading the following ensure you are happy with the flexbox concepts of main axis and cross axis discussed in my previous post.
Justification on the main axis
The CSS property justify-content is used to control spacing between and around items along the main axis (assuming extra space is available). It is applied to the flex container items.
The key values are:
- flex-start
- The default value. Items are packed flush to each other toward the starting edge of the flex container.
- flex-end
- Items are packed flush to each other toward the ending edge of the flex container.
- center
- Items are packed flush towards the centre of the flex container.
- space-between
- Items are evenly distributed within the flex container along the main axis. The spacing between items is the same. The first item is flush with the main-start edge, and the last item is flush with the main-end edge.
- space-around
- Items are evenly distributed within the flex container along the main axis. The spacing between items is the same. The empty space before the first and after the last item equals half of the space between each pair of adjacent items.
It was this property with a setting of space-between that was used in the 3rd introductory demo example to lay out navigation items evenly.
See the Pen Centre Vertically with Flexbox by Martin Cooper (@mustbebuilt) on CodePen.0
Have a play with the settings in the Flexbox playground.
Justification of flex items on the Cross Axis
Whereas justify-content is concerned with the justification of items along the main axis, the CSS property align-items is used to do the same on the cross axis. As such it has some similiar values.
- stretch
- The default value. Items are stretched to use the space available in the cross axis.
- flex-start
- Items are positioned at the beginning of the container.
- flex-end
- Items are positioned toward the end of the container.
- center
- Items are positioned towards the centre of the flex container along the cross axis.
Have a play with the settings in the Flexbox playground.
Justification of lines on the Cross Axis
The align-content property comes into play when there are multiple lines of content inside of the flex container. As this scenario occurs alot this is likely to be a very useful property, more so I would argue that align-item above. Its values apply to the lines of content in the flex container, affecting how each line relates to the other lines in the layout.
The key values are:
- stretch
- The default value. Lines are stretched to use the space available in the cross axis.
- flex-start
- Lines are packed towards the beginning of the container.
- flex-end
- Lines are packed towards the end of the container.
- center
- Lines are packedd towards the centre of the flex container along the cross axis.
- space-between
- Lines are evenly distributed within the flex container. The spacing between lines is the same. The first line is flush with the main-start edge, and the last line is flush with the main-end edge.
- space-around
- Lines are evenly distributed within the flex container. The spacing between lines is the same. The empty space before the first and after the last lines equals half of the space between each pair of adjacent lines.
In the playground leave the align-item value on the default stretch and then change the align-content value to see the affect.