Warning: Trying to access array offset on value of type null in /homepages/6/d201749245/htdocs/wpress/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Warning: Trying to access array offset on value of type null in /homepages/6/d201749245/htdocs/wpress/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 17

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.

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.

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.

Flexbox Playground

Leave a Comment