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.
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.
.container { display: flex; height: 200px; /* Flex container with some height */ } .align-item-stretch { align-items: stretch; /* Default value */ }
and the html will be:
<div class="container"> ... </div>
After this what we will get to display is:
So the second value we can specify is flex-start.
.align-item-start { align-items: flex-start; }
<div class="container d-flex align-item-start"> ... </div>
After this what we will get to display is: 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.
Similar to flex-start we also have flex-end. Flex end pushes the item to the end of the cross axis.
.align-item-end { align-items: flex-end; }
<div class="container d-flex align-item-end"> ... </div>
The fourth possible value is center which centers the content on the cross axis.
.align-item-center { align-items: center; }
<div class="container d-flex align-item-center"> ... </div>
The baseline value for flex item will align flex items along with their content baseline 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.
.align-item-baseline { align-items: baseline; }
<div class="container d-flex align-item-baseline"> ... </div>