How to use align-item Property In CSS
In this approach align-items: flex-end is used to align flex items vertically at the bottom of a container. This property can be helpful if you want to align items in a flex container to the end of the cross-axis.
Syntax:
.container {
display: flex;
align-items: flex-end;
}
Example: in this example, three red boxes in a flex container, are vertically aligned at the bottom due to the “align-items: flex-end” CSS property.
HTML
<!DOCTYPE html> < html > < head > < style > .container { display: flex; align-items: flex-end; height: 200px; border: 1px solid black; } .item { width: 50px; height: 50px; background-color: red; margin: 5px; } </ style > </ head > < body > < div class = "container" > < div class = "item" ></ div > < div class = "item" ></ div > < div class = "item" ></ div > </ div > </ body > </ html > |
Output:
How to Align Items to End Position using CSS ?
To align elements to the end, you can use the CSS property justify-content: flex-end; in a flexbox container, and for aligning elements to the end vertically, you can use the CSS property align-items: flex-end; in a flexbox container. This property aligns the flex items along the cross-axis (vertical axis) of the container.
Here we are using these approaches with the help of basic examples:
Table of Content
- Using Justify-content Property
- Using align-item Property