Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to align an item to the flex-end in the container using CSS ?
In CSS, the use of aligning items to the flex-end in a container using CSS is to position the items at the end of the container's main axis. This allows for more precise control over the layout of the items within the container, such as aligning items to the bottom of a header or the right side of a navigation bar. Additionally, aligning items to the flex-end can improve the overall visual design and user experience of the website or application by creating a clean and organized layout.
Approaches
We have three different approaches for aligning the item baseline of the container include −
Using the "align-items:flex-end"
Using the "justify-content:flex-end"
Let us look at each of these steps in detail.
Approach 1: Using the "align-items:flex-end"
The first approach for aligning items to the flex-end in a container is the "align-items:flex-end" property in CSS Flexbox is used to align the items within a flex container along the vertical (cross) axis.When the "align-items" property is set to "flex-end", the items within the container will be aligned to the bottom of the container. This is useful for creating vertical layouts where items should be aligned to the bottom of the container, rather than the top.
Example
Here, we will go through a step-by-step example to implement this approach −
Step 1 − The "#container" is selecting the element with the id of "container" using CSS selectors and "display: flex;" is setting the display property of the selected element to "flex". This tells the browser to treat the element as a flex container and to lay out its child elements in a flex layout.
#container {
display: flex;
Step 2 − In style.css file, use the align-items:flex-end property is being set on the #container element. This tells the browser to align the children elements of the #container element along the vertical axis, with the bottom edges of the children elements touching the bottom edge of the #container element
display: flex; align-items: flex-end;
Step 3 − Inside the container, there are 3 <div> elements with the class "item" which act as the flex items that contain child elements.
<div id="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
Step 4 − The final code would look like this.
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Align-items: flex-end</title>
<style>
#container {
width: 420px;
height: 150px;
border: 1px solid black;
display: flex;
align-items: flex-end;
font-size: 30px;
}
.item {
padding: 10px;
color: blue;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">tutorials</div>
<div class="item">point</div>
<div class="item">articles</div>
</div>
</body>
</html>
Approach 2: Using the "justify-content:flex-end"
The first approach for aligning items to the flex-end in a container is the "justify-content:flexend" property in CSS Flexbox is used to align the flex items along the main axis, which is horizontal by default (left-to-right in most cases). So, when set to flex-end, it will align the flex items to the end of the main axis, which is the right side of the container.
Example
Here, we will go through a step-by-step example to implement this approach −
Step 1 − The "#container" is selecting the element with the id of "container" using CSS selectors and "display: flex;" is setting the display property of the selected element to "flex". This tells the browser to treat the element as a flex container and to lay out its child elements in a flex layout.
#container {
display: flex;
Step 2 − In style.css file, use the justify-content:flex-end property is being set on the #container element. This tells the browser "justify-content" property is set to "flex-end", which aligns the flex items along the main axis (horizontal axis) to the end of the container.
display: flex; justify-content: flex-end;
Step 3 − Inside the container, there are 3 <div> elements with the class "item" which act as the flex items that contain child elements.
<div id="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div>
Step 4 − The final code would look like this −
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Justify-content: flex-end</title>
<style>
#container {
width: 420px;
height: 150px;
border: 1px solid black;
display: flex;
justify-content: flex-end;
font-size: 30px;
}
.item {
padding: 10px;
color: blue;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">tutorials</div>
<div class="item">point</div>
<div class="item">articles</div>
</div>
</body>
</html>
Conclusion
In this article, we examine how to align an item to the flex-end in the container using different approaches called "align-items:flex-end" property and "justify-content:flex-end" property in CSS. And both align-items: flex-end and justify-content: flex-end align the flex items to the end of the container, but they align them along different axes. align-items aligns the items along the cross axis (usually the vertical axis), while justify-content aligns the items along the main axis (usually the horizontal axis).
1K+ Views
