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
Selected Reading
Role of CSS justify-content property flex-end value
The CSS justify-content property with the flex-end value is used to align flex items at the end of the flex container's main axis. This moves all flex items to the right side of the container (in a row direction) or to the bottom (in a column direction).
Syntax
.container {
display: flex;
justify-content: flex-end;
}
Example
You can try to run the following code to implement the flex-end value −
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
background-color: #f0f0f0;
justify-content: flex-end;
padding: 10px;
border: 2px solid #333;
}
.mycontainer > div {
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 60px;
font-size: 20px;
width: 80px;
margin: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Flex Items Aligned to End</h2>
<div class="mycontainer">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
A flex container with three green items (Item 1, Item 2, Item 3) aligned to the right side of the container, with the items packed together at the end of the main axis.
Conclusion
The justify-content: flex-end property effectively moves all flex items to the end of the main axis, creating right-aligned content in horizontal layouts. This is particularly useful for navigation bars, button groups, or any content that needs to be positioned at the container's end.
Updated on: 2026-03-15T12:58:28+05:30
184 Views
Advertisements