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 flexbox columns left and right using CSS?
Flexbox is a powerful layout system in CSS which enables the web developers to create responsive and flexible web designs. With its ability to easily align and organize elements within a container, it has become a popular choice for building modern websites. However, aligning flexbox columns left and right can be a challenge for many developers, especially when dealing with dynamic content or varying column widths.
In this article, we will discuss about the various techniques for aligning flexbox columns to the left and right using CSS, including the use of flexbox properties, margin auto, and the align-content property. By the end of this article, you will have a better understanding of how to create flexible and responsive layouts that align flexbox columns to meet your design needs.
Creating Flexbox Columns
To create flexbox columns, you need to use the flexbox layout system in CSS. Here are the steps to create flexbox columns −
Create a parent container for the columns.
Set the display property to "flex" for the parent container.
Create child elements for the columns.
Use flexbox properties to style the columns.
Example
Given below example illustrates on how to create flexbox columns.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: cyan;
height: 200px;
width: 80%;
}
.flex-item {
flex-basis: 33%;
background-color: red;
width: 50px;
margin: 30px;
text-align: center;
letter-spacing: 1px;
}
</style>
</head>
<body>
<h1>Flexbox Columns</h1>
<div class="flex-container">
<div class="flex-item"> Column 1 </div>
<div class="flex-item"> Column 2 </div>
<div class="flex-item"> Column 3 </div>
<div class="flex-item"> Column 4 </div>
</div>
</body>
</html>
Methods to Align Flexbox Columns Left and Right
Aligning flexbox columns to the left and right using CSS can be achieved using various techniques. Here are some of the most effective methods −
To align columns to the left, set the "align-content" property of the flex container to "flex-start". This property aligns the content to the left side of the container.
Example
The following example demonstrates aligning flexbox columns towards left.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: cyan;
height: 200px;
width: 100%;
flex-flow: column wrap;
align-content: flex-start;
}
.flex-item {
flex-basis: 20%;
background-color: red;
width: 100px;
margin: 30px;
text-align: center;
letter-spacing: 1px;
}
</style>
</head>
<body>
<h1>Flexbox Columns</h1>
<div class="flex-container">
<div class="flex-item"> Column 1 </div>
<div class="flex-item"> Column 2 </div>
<div class="flex-item"> Column 3 </div>
<div class="flex-item"> Column 4 </div>
<div class="flex-item"> Column 5 </div>
<div class="flex-item"> Column 6 </div>
<div class="flex-item"> Column 7 </div>
<div class="flex-item"> Column 8 </div>
</div>
</body>
</html>
Aligning Right
To align columns to the right, set the "align-content" property of the flex container to "flex-end". This property aligns the content to the right side of the container.
CSS Example
.flex-container {
display: flex;
background-color: cyan;
height: 200px;
width: 100%;
flex-flow: column wrap;
align-content: flex-end;
}
.flex-item {
flex-basis: 20%;
background-color: red;
width: 100px;
margin: 30px;
text-align: center;
letter-spacing: 1px;
}
Using Margin Auto
To align columns to the left, set the "margin-right" property of the last flex item to "auto". This will push the item to the left side of the container.
Example
To align columns to the right, set the "margin-left" property of the first flex item to "auto". This will push the item to the right side of the container.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.column {
background-color: orange;
margin: 10px;
width: 100px;
height: 40px;
text-align: center;
letter-spacing: 1px;
padding: 2px;
}
.column:last-child {
margin-right: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="column"> Column 1 </div>
<div class="column"> Column 2 </div>
<div class="column"> Column 3 </div>
<div class="column"> Column 4 </div>
<div class="column"> Column 5 </div>
</div>
</body>
</html>
Aligning Left and Right Simultaneously
Till now we have aligned the columns towards left or right of the flex container. Now, let’s align them to both left and right simultaneously.
To align columns to the left and right, set the "align-content" property of the flex container to "space-between". This property aligns the content to the left as well as right side of the container.
Example
The following example demonstrates aligning flexbox columns towards left and right.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: cyan;
height: 200px;
width: 100%;
flex-flow: column wrap;
align-content: space-between;
}
.flex-item {
flex-basis: 20%;
background-color: red;
width: 100px;
text-align: center;
letter-spacing: 1px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"> Column 1 </div>
<div class="flex-item"> Column 2 </div>
<div class="flex-item"> Column 3 </div>
<div class="flex-item"> Column 4 </div>
<div class="flex-item"> Column 5 </div>
<div class="flex-item"> Column 6 </div>
<div class="flex-item"> Column 7 </div>
<div class="flex-item"> Column 8 </div>
<div class="flex-item"> Column 9 </div>
<div class="flex-item"> Column 10 </div>
</div>
</body>
</html>
In the above example, the "align-content" property is set to "space-between", which creates equal spacing between columns.
Conclusion
In conclusion, flexbox column alignment to the left and right in CSS is a quick and easy technique to make a layout that looks good. You can simply change the alignment of the columns inside a flex container by utilizing the margin-left and margin-right property on the child components.
In order to achieve this, we may also utilize the align-content property of flexbox. It is a flexible option for various layout designs since the same idea applies whether you need to align one column or several columns. Modern web development requires the use of CSS flexbox since it allows for the creation of dynamic and responsive layouts that can adjust to various screen sizes and device kinds.
18K+ Views
