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:
align item to the flex-end in the container using CSS Example Output
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