Practical Frontend
Flexbox

Cross Axis Alignment

1. Align Items

The `justify-content CSS property provides us with a way to control the alignment of flex items along the main axis. This property allows us to easily adjust the position of the items within the container and ensure that they are aligned as desired.

Similarly, to align flex items along the cross axis, we can use the align-items property. This property offers greater control over the layout by allowing us to adjust the alignment along the perpendicular axis. The possible values for this property include:

  • stretch: This value stretches items to fill the entire height or width of the container along the cross axis. This is the default value for align-items.
  • flex-start: This value aligns items to the start of the cross axis.
  • flex-end: This value aligns items to the end of the cross axis.
  • center: This value aligns items to the center of the cross axis.
  • baseline: This value aligns items along their baselines, making it a common alignment choice for text items.

It is important to note that the effects of align-items are dependent on the value of flex-direction. For example, when flex-direction is set to row, align-items only affects the height of items and not their width, whereas when flex-direction is set to column, align-items affects the width of items and not their height.

1
2
3
flex-direction
row
justify-content
flex-start
align-items
stretch

To better understand how align-items work, experiment with changing its values. You can also adjust the width of the container by dragging the marker on the right side of the example.

In this example, we added new big stripe rectangles, which represent the spaces where flexbox will automatically add to the container when calculating for cross axis.

space

When you change the value of align-items, flexbox will calculate the remaining space in the cross axis and distribute it to the flex items based on the chosen value. If flex-direction is row, the space could be put on the top, or on the bottom, or on both sides of each item. If flex-direction is column, the space could be put on the left, or on the right, or on both sides of each item.

1

1

Let’s examine how the algorithm works with each value of justify-content.

1.1. Stretch

1
2
3
flex-direction
row
justify-content
flex-start

When align-items is set to stretch, the flex items will be stretched to fill the cross axis of the container. The cross axis is the axis perpendicular to the main axis, determined by the value of flex-direction.

If flex-direction is set to row, the cross axis is vertical and the items will be stretched to fill the full height of the container, minus any padding.

On the other hand, if flex-direction is set to column, the cross axis is horizontal and the items will be stretched to fill the full width of the container, also subtracting any padding.

1.2. Start

1
2
3
flex-direction
row
justify-content
flex-start

When the value of align-items is set to flex-start, the items align to the start of the cross axis.

This means that for a container with a flex-direction of row, the items align to the top of the container, and for a container with a flex-direction of column, the items align to the left side of the container. The items will retain their original size and will not be stretched.

1.3. End

1
2
3
flex-direction
row
justify-content
flex-start

When the value of align-item is flex-end, all items are aligned towards the end of the cross axis of the container.

If flex-direction is set to row, then items will be aligned to the bottom of the container. And if flex-direction is set to column, then items will be aligned to the right of the container. In both cases, the items will not stretch to fill the entire cross size of the container. Instead, they will be aligned to the end of the cross axis.

1.4. Center

1
2
3
flex-direction
row
justify-content
flex-start

The value of center for the align-items property will align all the flex items along the cross axis of the container to be centered.

In case the flex-direction is set to row, the items will be aligned vertically at the center of the container, and in case flex-direction is set to column, the items will be aligned horizontally at the center of the container.

1.5. Baseline

1
2
3
flex-direction
row
justify-content
flex-start

When the value of align-items is set to baseline, the items are aligned such that their baselines align with each other.

The baseline is a line that runs along the bottom of the letters in a font. In CSS, flex items can be lined up based on their baselines which means they’ll be placed so that the bottoms of the letters are lined up with each other. The item with the tallest text will be placed against the start of the line, and all the other items will be adjusted so their text bottoms line up with it.

If a flex item doesn’t have a baseline, one is created based on the item’s border.

1.5.1 Baseline with row direction

If we use the baseline alignment in CSS for a group of items with different heights, CSS will select the tallest item as the reference point and align all the other items based on its baseline.

For instance, in this example, item 2 is the tallest with a height of 200px, and its text is centered. Thus, when using baseline alignment in CSS, all the items will align with the baseline of item 2, causing item 1 and item 3 to align with item 2 as well.

.item1 {
  height: 40px;
}

.item2 {
  height: 200px;
}

.item3 {
  height: 100px;
}
1
2
3

If a flex item is also a flex container, how does CSS calculate its baseline alignment? Let’s explore this with an example where item 2 is replaced with a flex container.

If the flex-direction of item 2 is row, then the baseline of item 2 will be the baseline of the tallest item inside it, which in this case is on line 3.

1
line 1
line 2
line 3
3
flex-direction
row

If the flex-direction of item 2 is column, then the baseline will be the baseline of the first element, which is on line 1.

1
line 1
line 2
line 3
3
flex-direction
column

1.5.2. Baseline with column direction

When the flex-direction is changed to column, all the items align based on their left edge. If each item has a different margin on the left, they will still align so that their left edges are in the same column.

Let ‘s add more margin on each items

.item1 {
  margin-left: 60px;
}

.item2 {
  margin-left: 20px;
}

.item3 {
  margin-left: 100px;
}
1
2
3

In this case, since item 3 has largest margin left, CSS adding a space with width is 40px (100px - 60px) to the left of item 1, and space with width 80px (100px - 20px) to the left of item 2.

Previous2.2. Main Axis AligmentNext3. Flex Items