How to Right-align flex item?
Last Updated :
10 Oct, 2024
Flexbox is a CSS layout module that provides a way to easily align and distribute space among items in a container. The concept revolves around two main axes:
- Main-Axis: The primary axis along which the flex items are laid out.
- Cross-Axis: The perpendicular axis to the main axis.
The direction and alignment of flex items can be controlled using various Flexbox properties. Here’s how you can align flex items to the right using different techniques.
Representation of flex-boxRight Aligning Flex Items Using Flexbox Properties
Below are two common methods to right-align flex items in a flex container.
Example 1: Right Aligning Using flex-direction Property
When the flex-direction is set to "row-reverse", the flex items are aligned to the right, and the order of the items is reversed. In other words, the items will be laid out from right to left.
html
<!DOCTYPE html>
<html>
<head>
<title>Right Alignment</title>
<style>
#container
{
width:600px;
height: 300px;
border: 5px solid black;
display: flex;
flex-direction: row-reverse;
}
#container div
{
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:#389900;">one</div>
<div style="background-color:#08ebb2;">two</div>
<div style="background-color:#dd2289;">three</div>
<div style="background-color:#fcff66;">four</div>
</div>
</body>
</html>
When flex-direction is set as "row-reverse" it not only right aligns the flex items but reverses the order of the items also. In simple words, flex-items now expand from right to left as shown in the given figure.
Output:
Figure-1Example 2: Right Aligning Using justify-content Property
When justify-content is set to "flex-end", all flex items are shifted to the right end of the container along the main axis. Unlike the previous example, the items retain their original order and are laid out from left to right.
html
<!DOCTYPE html>
<html>
<head>
<title>Right alignment</title>
<style>
#container
{
width:600px;
height: 300px;
border: 5px solid black;
display: flex;
justify-content: flex-end;
}
#container div
{
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="container">
<div style="background-color:#389900;">one</div>
<div style="background-color:#08ebb2;">two</div>
<div style="background-color:#dd2289;">three</div>
<div style="background-color:#fcff66;">four</div>
</div>
</body>
</html>
When justify-content is set to "flex-end", it instantly shifts all the flex-items to the end of the flex-container along the main-axis, i.e flex items get right aligned. It is different from the above-used method in terms of direction only as in this, flex-items will expand from left to right only. It will be more clear with the given figure.
Output:
Figure-2
Similar Reads
How to Align One Item to the Right using CSS Flexbox ? Methods to Align a Single Item to the Right using CSS Flexbox:1. Using margin-left: autoApplying margin-left: auto to the specific flex item pushes it to the right, utilizing the available space.HTML<html> <head> <style> .flex-container { display: flex; background-color: #f0f0f0; p
3 min read
How to Right Align Div Elements in CSS? In CSS, to right-align <div> elements, there are multiple methods available that can be used. Each method serves a different purpose, making it easy to choose the best one depending on your needs. 1. Using Float PropertyThe float property in CSS is used to right-align a <div> by applying
3 min read
Primer CSS Flexbox Align Items Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Primer CSS Flexbox Align Items used t
3 min read
How to align items in a flex container with JavaScript ? In CSS, the align-items property is used to align elements in a flex container. This can be similarly implemented using JavaScript by selecting the specific element using a selector method and then using the alignItems property to set the alignment. This can be useful in situations where dynamically
2 min read
How to align item baseline of the container ? In this article, we will learn how to align items to the baseline of the container. There are three types of alignments in CSS, baseline alignment, positional alignment, and distributed alignment. The Baseline alignment is used to align the baselines of boxes across a group of alignment subjects. Th
3 min read
How to Align Items to End Position using CSS ? To align elements to the end, you can use the CSS property justify-content: flex-end; in a flexbox container, and for aligning elements to the end vertically, you can use the CSS property align-items: flex-end; in a flexbox container. This property aligns the flex items along the cross-axis (vertica
2 min read