The first of the Container Flexbox options is Row Alignment – but this option only be visible when when Full Height or Minimum Height is selected for the Height option. Rows are the space the columns take up in a Container before they break to a new row. This option defines how rows should be aligned vertically within the container, and therefore will only have full effect when there are multiple rows of content in the Container.
Options are Stretch, Top, Center, Bottom, Space Between, Space Around, and Space Evenly. See below for examples of what this can achieve.
IMPORTANT NOTE: This option will only have full effect if multiple rows of content are present in the Container.
Examples of Row Alignment
Let’s start with a Container that has two rows of Columns. But before we look at the alignment of the rows, let’s look at the Container height. As mentioned already, the Row Alignment option will not show when Auto is selected for the Height option, because in that case, there is no extra room in the Container for the options to fully work. You can, however, use the Full Height Option, or even the Minimum Height option.
In the example below, I have set the container to Minimum Height, with a specified Minimum Height of 90vh (this equates to 90% of the Viewport height), but as long as there is extra room in the Container, you will see the effect.
Apart from the Container Height, the Container below also has 50px padding at both the top and bottom of it, but with all other settings on default, we can see the two rows as they appear in the Container in the first image below.
Row Alignment – Stretch
The default selection with the Row Alignment option is Stretch, which means the Row will stretch to take up all available space. Note how the Columns themselves are not changing in size with this option, as this is the Row that is being affected.
In terms of positioning, with two rows in the Container below, this actually means that the rows are each placed in 50% of the container height, and aligned to the top, with the first row taking up to 50% of the available vertical height, and the second row under that, also aligned to the top of its 50%.
Row Alignment – Flex Start (Top)
The next few selections are very simple. With the Flex Start selection, as you can see, both rows of Columns are aligned to the top of the Container.
Row Alignment – Center
With the Center selection, both rows of Columns are aligned in the center of the Container.
Row Alignment – Flex End (Bottom)
With the Flex End selection, both rows of Columns are aligned to the bottom of the Container.
Row Alignment – Space Between
With the Space Between selection, both rows of Columns are aligned to the top and the bottom of the Container respectively, maximizing the space between them.
Row Alignment – Space Around
With the Space Around selection, both rows of Columns are aligned in the middle of their 50% area, with the same amount of space above and below them. This is why the space in the middle is twice as big as the space above and below the rows.
Row Alignment – Space Evenly
With the Space Evenly selection, the available space in the Container is equally divided between above, between and below the rows of Columns.