How to Align Items to End Position using CSS ?
Last Updated :
25 Sep, 2023
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:
In this approach we are using the justify-content: flex-end; CSS property aligns flex items to the end of the container, pushing them to the right side horizontally.
Syntax:
.container {
display: flex;
justify-content: flex-end;
}
Example: In this example, we create a flex container with three red boxes aligned to the right due to the “justify-content: flex-end” CSS property.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.container {
display: flex;
justify-content: flex-end;
height: 200px;
/* Just for demonstration */
border: 1px solid black;
/* Just for demonstration */
}
.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:
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:
Share your thoughts in the comments
Please Login to comment...