When working with a flex line, you can also determine where inside the flexbox it will align itself. The align-items property handles alignment along the axis opposite your flex items' main axis. In other words, if your flex-direction is set to a row, align-items will address vertical alignment of the flex line. If your flex-direction is set to a column, align-items will be applied to horizontal alignment.
The align-items property has a few values available that we saw in justify-content. It has flex-start, flex-end and center, which work the same way as before, except in the opposite direction. But this property also has baseline and stretch. Baseline means the flex line will base its alignment with the text content's baselines of its flex items. And stretch directs the flex line to fill up all the space available to it.
| align-items | |
|---|---|
| stretch (default) items stretch to fill the container |
Item 1
Item 2
Item 3
|
| flex-start moved toward the start of the container |
Item 1
Item 2
Item 3
|
| flex-end moved toward the end of the container |
Item 1
Item 2
Item 3
|
| center moved toward the center of the container |
Item 1
Item 2
Item 3
|
| baseline positions the items so that their content baselines align |
Item 1
Item 2
Item 3
|
If your flex items are wrapping to multiple lines (and you have wrap or wrap-reverse activated), then you can also take advantage of the align-content property. This property is similar to justify-content, except for flex lines instead. Most of the values are the same, but now they are applied to the opposite axis to determine alignment of the flex lines. This property also has the stretch value available as we just encountered with the align-items property.
| align-content | |
|---|---|
| stretch (default) lines stretch to evenly fill the container |
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
|
| flex-start lines are moved toward the start of the container |
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
|
| flex-end lines are moved toward the end of the container |
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
|
| center lines are moved toward the center of the container |
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
|
| space-between first and last line moved to the edges of the container, with even amounts of space between the remaining lines |
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
|
| space-around adds an even amount of space on either side of every item in the container |
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
|
Stretch is the default value for both align-items and align-content. When you have multiple flex lines, the space taken up by each line will be evenly distributed. When align-content is left in stretch mode, align-items can be altered to move the flex item content within the flex lines. So if your flex-direction is in rows, and you set align-items to flex-end while align-content is set to stretch, it will look like the example below. This should give you an idea of how flexbox is distributing the content.
|
<style> align-items:flex-end; |
|
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
|
However, if you have align-content set to any value other than stretch, align-items won't have the space within a flex line to do anything. Any other values using align-content will collapse the flex lines to fit the flex items' content, leaving no wiggle room for adjustments to align-items.
|
<style> align-items:flex-end; |
|
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
|
