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
How to align flexbox columns left and right using CSS?
To align flexbox columns left and right using CSS, we can use various flexbox properties. In this article, we will learn three different approaches to align flexbox columns left and right using CSS.
Syntax
/* Method 1: Using justify-content */
.container {
display: flex;
justify-content: flex-start | flex-end | space-between;
}
/* Method 2: Using margin */
.item {
margin-left: auto; /* Push to right */
margin-right: auto; /* Push to left */
}
Method 1: Using justify-content Property
The justify-content property aligns flex items horizontally within the container
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #333;
margin: 10px 0;
padding: 10px;
}
.left {
justify-content: flex-start;
}
.right {
justify-content: flex-end;
}
.between {
justify-content: space-between;
}
.item {
width: 100px;
height: 80px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
}
</style>
</head>
<body>
<h3>Left Alignment</h3>
<div class="container left">
<div class="item">Column 1</div>
<div class="item">Column 2</div>
</div>
<h3>Right Alignment</h3>
<div class="container right">
<div class="item">Column 1</div>
<div class="item">Column 2</div>
</div>
<h3>Left and Right Alignment</h3>
<div class="container between">
<div class="item">Left</div>
<div class="item">Right</div>
</div>
</body>
</html>
Three containers are displayed: 1. Left-aligned: Both columns appear on the left side 2. Right-aligned: Both columns appear on the right side 3. Space-between: One column on the left, one on the right with space between them
Method 2: Using margin Property
The margin property with auto values can push flex items to opposite sides
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
border: 2px solid #333;
margin: 10px 0;
padding: 10px;
}
.item {
width: 100px;
height: 80px;
background-color: #2196F3;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
}
.push-right {
margin-left: auto;
}
.push-left {
margin-right: auto;
}
</style>
</head>
<body>
<h3>Push Second Column Right</h3>
<div class="container">
<div class="item">Left</div>
<div class="item push-right">Right</div>
</div>
<h3>Push Both Columns Right</h3>
<div class="container">
<div class="item push-right">Column 1</div>
<div class="item">Column 2</div>
</div>
</body>
</html>
Two containers showing: 1. One column stays left, the second is pushed to the right with margin-left: auto 2. Both columns are pushed to the right side together
Method 3: Using align-content for Wrapped Columns
The align-content property works when flex items wrap into multiple lines
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
height: 150px;
width: 200px;
border: 2px solid #333;
margin: 10px;
}
.left-align {
align-content: flex-start;
}
.right-align {
align-content: flex-end;
}
.item {
width: 80px;
height: 60px;
background-color: #FF9800;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
}
</style>
</head>
<body>
<h3>Left Aligned Wrapped Columns</h3>
<div class="container left-align">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h3>Right Aligned Wrapped Columns</h3>
<div class="container right-align">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
Two containers with wrapped items: 1. Items wrapped and aligned to the top-left of the container 2. Items wrapped and aligned to the bottom-right of the container
Conclusion
The justify-content property is the most common method for aligning flex columns horizontally. Use margin: auto for individual item control, and align-content for wrapped multi-line layouts.
Updated on: 2026-03-15T17:10:47+05:30
22K+ Views
Advertisements