How to align item to the flex-end in the container using CSS ?
Aligning items to the flex-end in a container using CSS helps create visually appealing layouts by ensuring content is positioned at the end of the container. To align items to the flex-end within a container using CSS, apply the justify-items: flex-end; property to the container. This shifts items to the end of the main axis, aligning them to the right if it’s a horizontal layout or to the bottom if it’s vertical.
here are some common approaches:
Table of Content
- Using align-items and display property
- Using Align Self:
- Using justify content property
Approach 1: Using align-items and display property
The align-items and display property of CSS are used to align items at the end of the container. To align items at the end of the container, we set the align-items value to flex-end and the display value to flex.
Syntax:
display:flex;
align-items: flex-end;
Example: In this example, we will align them to the flex end using CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg {
border: solid 5px red;
width: 50vh;
height: 50vh;
font-size: 50px;
color: rgb(0, 167, 0);
display: flex;
align-items: flex-end;
}
</style>
</head>
<body>
<div class="gfg">
<div>w3wiki</div>
</div>
</body>
</html>
Output:
Approach 2 :Using Align Self:
The align-self property in CSS allows individual flex items to align themselves along the cross-axis within a flex container. Setting “align-self: flex-end;” aligns the selected item to the end of the cross-axis, overriding the container’s default alignment behavior.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align Self Example</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 200px;
border: 1px solid #ccc;
}
.item {
width: 30%;
padding: 10px;
border: 1px solid #000;
}
.align-end {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<br>
<div class="item">Item 2</div>
<br>
<div class="item align-end">Item 3 (Aligned to End)</div>
</div>
</body>
</html>
Output:
Approach 3 :Using justify content property
Using the “justify-content” property in CSS with the value “flex-end” aligns flex items to the end of the flex container along the main axis. This approach provides a simple way to align items without the need to modify individual item properties.
Example: In this example we demonstrates a flex container with a single item aligned to the end using Flexbox. The item’s position is determined by the “justify-content: flex-end;” property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: flex-end;
align-items: center;
height: 200px;
border: 1px solid #ccc;
}
.item {
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="item item2">Item (Aligned to End)</div>
</div>
</body>
</html>
Output: