Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to align an item to the flex-end in the container using CSS ?
In CSS, aligning items to the flex-end in a container allows you to position flex items at the end of either the main axis or cross axis. This is useful for creating layouts where items need to be positioned at the bottom (cross axis) or right side (main axis) of the container, providing precise control over element positioning in flexbox layouts.
Syntax
/* Align items to the end of the cross axis (vertical) */
.container {
display: flex;
align-items: flex-end;
}
/* Align items to the end of the main axis (horizontal) */
.container {
display: flex;
justify-content: flex-end;
}
Method 1: Using align-items: flex-end
The align-items: flex-end property aligns flex items to the end of the cross axis (typically the bottom of the container).
Example
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 420px;
height: 150px;
border: 2px solid #333;
display: flex;
align-items: flex-end;
background-color: #f0f0f0;
}
.item {
padding: 15px;
margin: 5px;
background-color: #4CAF50;
color: white;
font-size: 18px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Three green boxes with white text are aligned to the bottom of the container, arranged horizontally from left to right.
Method 2: Using justify-content: flex-end
The justify-content: flex-end property aligns flex items to the end of the main axis (typically the right side of the container).
Example
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 420px;
height: 150px;
border: 2px solid #333;
display: flex;
justify-content: flex-end;
background-color: #f0f0f0;
align-items: center;
}
.item {
padding: 15px;
margin: 5px;
background-color: #2196F3;
color: white;
font-size: 18px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Three blue boxes with white text are aligned to the right side of the container, vertically centered within the container.
Key Differences
| Property | Axis | Effect |
|---|---|---|
align-items: flex-end |
Cross axis (vertical) | Aligns items to bottom |
justify-content: flex-end |
Main axis (horizontal) | Aligns items to right |
Conclusion
Both align-items: flex-end and justify-content: flex-end position items at the "end" of the container, but along different axes. Use align-items for vertical alignment and justify-content for horizontal alignment to achieve precise flexbox positioning.
2K+ Views
