Align Items

on May 7, 2020
🔥 2108 views
Contents hide
1) Stretch – align items default value
2) Flex Start
3) Flex End
4) Center Align
5) Baseline

In this lesson, we will see about the Align Items property. Align items defines the default behavior for how flex items are laid out along the cross axis.

It works like the justify-content but in the perpendicular direction.

Stretch – align items default value

it means the item stretches the entire length of the cross axis.
For e.x. we have a flex container with some height of any pixels than the items will be stretch from top to bottom.

style.css

.container {
  display: flex;
  height: 200px; /* Flex container with some height */
}
.align-item-stretch {
  align-items: stretch; /* Default value  */
}

and the html will be:

index.html

<div class="container"> ...
</div>

After this what we will get to display is:
stretch

Flex Start

So the second value we can specify is flex-start.

style.css

.align-item-start {
  align-items: flex-start;
}

and the html will be:

index.html

<div class="container d-flex align-item-start"> ...
</div>

After this what we will get to display is:
flex-start
As you can see that all the items are pushed to the cross start which is the starting point of the cross axis. Remember cross-axis flows from top to bottom.

Flex End

Similar to flex-start we also have flex-end. Flex end pushes the item to the end of the cross axis.

style.css

.align-item-end {
  align-items: flex-end;
}

and the html will be:

index.html

<div class="container d-flex align-item-end"> ...
</div>

After this what we will get to display is:
flex-end

Center Align

The fourth possible value is center which centers the content on the cross axis.

style.css

.align-item-center {
  align-items: center;
}

and the html will be:

index.html

<div class="container d-flex align-item-center"> ...
</div>

After this what we will get to display is:
flex-center

Baseline

The baseline value for flex item will align flex items along with their content baseline
baseline: description
As you see in the above image it has 3 items A, B, C each with different height and content size. you can see how all the content in the flex items sits on the baseline.

style.css

.align-item-baseline {
  align-items: baseline;
}

and the html will be:

index.html

<div class="container d-flex align-item-baseline"> ...
</div>
Align Items