Properties that control alignment
The properties we will look at in this guide are as follows.
justify-content — controls alignment of all items on the main axis.
align-items — controls alignment of all items on the cross axis.
align-self — controls alignment of an individual flex item on the cross axis.
align-content — described in the spec as for "packing flex lines"; controls space between flex lines on the cross axis.
gap, column-gap, and row-gap — used to create gaps or gutters between flex items.
We will also discover how auto margins can be used for alignment in flexbox.
The Cross Axis
The align-items and align-self properties control alignment of our flex items on the cross axis, down the columns if flex-direction is row and along the row if flex-direction is column.
We are making use of cross-axis alignment in the most simple flex example. If we add display: flex to a container, the child items all become flex items arranged in a row. They will all stretch to be as tall as the tallest item, as that item is defining the height of the items on the cross axis. If your flex container has a height set, then the items will stretch to that height, regardless of how much content is in the item.
Three items, one with additional text causing it to be taller than the others.
Three items stretched to 200 pixels tall
The reason the items become the same height is that the initial value of align-items, the property that controls alignment on the cross axis, is set to stretch.
We can use other values to control how the items align:
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline
In the live example below, the value of align-items is stretch. Try the other values and see how all of the items align against each other in the flex container.
Aligning one item with align-self
The align-items property sets the align-self property on all of the flex items as a group. This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items plus a value of auto, which will reset the value to that which is defined on the flex container.
In this next live example, the flex container has align-items: flex-start, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: center. You can change the value of align-items or change the values of align-self on the individual items to see how this works.
Changing the main axis
So far we have looked at the behavior when our flex-direction is row, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.
Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.
If we change our flex-direction to column, align-items and align-self will align the items to the left and right.
Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.
You can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example.
Aligning content on the cross axis — the align-content property
So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the align-content property to control the distribution of space between the rows. In the specification this is described as packing flex lines.
For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.
The align-content property takes the following values:
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content: space-evenly (not defined in the Flexbox specification)
In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of align-content is space-between, which means that the available space is shared out between the flex lines, which are placed flush with the start and end of the container on the cross axis.
Try out the other values to see how the align-content property works.
Once again we can switch our flex-direction to column in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.
Note: The value space-evenly is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.
Aligning content on the main axis
Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — justify-content. This is because we are only dealing with items as a group on the main axis. With justify-content we control what happens with available space, should there be more space than is needed to display the items.
In our initial example with display: flex on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of justify-content being flex-start. Any available space is placed at the end of the items.
Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.
The justify-content property accepts the same values as align-content.
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: space-evenly (not defined in the Flexbox specification)
In the example below, the value of justify-content is space-between. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.
