Align Flexbox Columns Left and Right Using CSS

CSS Web Development Front End Technology

To align flexbox columns left and right using CSS, we can use various flexbox properties. In this article, we will learn and understand three different approaches to exaplain how to align flexbox columns left and right using CSS.

We have created two flexible columns using div and flexbox, our task is to align flexible columns to left and right using CSS.

Approaches to Align flexbox Columns Left and Right

Here is a list of approaches to align flexbox columns left and right using CSS which we will be discussing in this article with stepwise explaination and complete example codes.

Using align-Content Property
Using justify-content Property
Using margin Property

Align flexbox Columns Using align-Content

To align flexbox columns left and right using CSS, we have used CSS align-Content property.

We have used "display: flex;" to make a flexbox which makes it's child elements flex items.
To align flexbox columns to left, We have used start class selector and "align-content: flex-start;" which aligns the content at start of flex container making them left aligned.
To align flexbox columns to right, We have used end class selector and "align-content: flex-end;" which aligns the content at the end of flex container making them right aligned.
To align flexbox columns to left and right, We have used between class selector and "align-content: space-between;" which aligns the content to left and right.

Example

Here is a complete example code implementing above mentioned steps to align flexbox columns left and right.

<!DOCTYPE html>
<html>
<head>
    <title>
        Align flexbox columns left and right using CSS
    </title>
    <style>
        .container {
            display: flex;
            height: 200px;
            width: 100%;
            flex-flow: column wrap;
        }
        .start {
            align-content: flex-start;
        }
        .end {
            align-content: flex-end;
        }
        .between {
            align-content: space-between;
        }
        .item {
            flex-basis: 15%;
            background-color: #04af2f;
            color: white;
            margin: 2px;
            text-align: center;
            letter-spacing: 1px;
            border: 1px solid white
        }
        .para {
            text-align:center;
            border: 1px solid black;
            background-color: #2b0240;
            color:white;
        }
    </style>
</head>
<body>
    <h3>
        To align flexbox columns left and right 
        using CSS
    </h3>
    <p>
        In this example we have used  
        <strong>align-content</strong> property
        to align flexbox columns to left,right 
        and left & right using CSS.
    </p>
    <p class="para">
        Aligning flex Columns to left.
    </p>
    <div class="container start">
        <div class="item"> Column 1 </div>
        <div class="item"> Column 2 </div>
        <div class="item"> Column 3 </div>
        <div class="item"> Column 4 </div>
        <div class="item"> Column 5 </div>
        <div class="item"> Column 6 </div>
        <div class="item"> Column 7 </div>
        <div class="item"> Column 8 </div>
        <div class="item"> Column 9 </div>
        <div class="item"> Column 10 </div>
    </div>
        <P class="para">
            Aligning flex Columns to right.
        </P>
    <div class="container end">
        <div class="item"> Column 1 </div>
        <div class="item"> Column 2 </div>
        <div class="item"> Column 3 </div>
        <div class="item"> Column 4 </div>
        <div class="item"> Column 5 </div>
        <div class="item"> Column 6 </div>
        <div class="item"> Column 7 </div>
        <div class="item"> Column 8 </div>
        <div class="item"> Column 9 </div>
        <div class="item"> Column 10 </div>
    </div>
    <P class="para">
        Aligning flex Columns to left & right.
    </P>
    <div class="container between">
        <div class="item"> Column 1 </div>
        <div class="item"> Column 2 </div>
        <div class="item"> Column 3 </div>
        <div class="item"> Column 4 </div>
        <div class="item"> Column 5 </div>
        <div class="item"> Column 6 </div>
        <div class="item"> Column 7 </div>
        <div class="item"> Column 8 </div>
        <div class="item"> Column 9 </div>
        <div class="item"> Column 10 </div>
    </div>
</body>
</html>

Align flexbox Columns Using justify-content

In this approach, we have used CSS justify-content property to align flexbox columns left and right. It aligns the flex items when the items horizontally when items do not use all available space.

We have used "display: flex;" to make a flexbox which makes it's child elements flex items.
To align flexbox columns to left, We have used start class selector and "justify-content: flex-start;" which positions the flex items at start of flex container making them left aligned.
To align flexbox columns to right, We have used end class selector and "justify-content: flex-end;" which positions the flex items at the end of flex container making them right aligned.
To align flexbox columns to left and right, We have used between class selector and "justify-content: space-between;" which aligns the content to left and right.

Example

Here is a complete example code implementing above mentioned steps to align flexbox columns left and right.

<!DOCTYPE html>
<html>
<head>
    <title>
        Align flexbox columns left and right using CSS
    </title>
    <style>
        .container {
            display: flex;
        }
        .start {
            justify-content: flex-start;
        }
        .end {
            justify-content: flex-end;
        }
        .between {
            justify-content: space-between;
        }
        .item {
            height:100px;
            background-color: #04af2f;
            color: white;
            margin: 2px;
            text-align: center;
            letter-spacing: 1px;
            border: 1px solid black;
        }
        .para {
            text-align:center;
            border: 1px solid black;
            background-color: #2b0240;
            color:white;
        }
    </style>
</head>
<body>
    <h3>
        To align flexbox columns left and right
        using CSS
    </h3>
    <p>
        In this example we have used 
        <strong>justify-content</strong> property 
        to align flexbox columns to left, right
        and left & right using CSS.
    </p>
    <p class="para">
        Aligning flex Columns to left.
    </p>
    <div class="container start">
        <div class="item">Column 1</div>
        <div class="item">Column 2</div>
    </div>
    <p class="para">
        Aligning flex Columns to right.
    </p>
    <div class="container end">
        <div class="item">Column 1</div>
        <div class="item">Column 2</div>
    </div>
    <p class="para">
        Aligning flex Columns to left & right.
    </p>
    <div class="container between">
        <div class="item">Column 1</div>
        <div class="item">Column 2</div>
    </div>
</body>
</html>

Align flexbox Columns Using margin

In this approach, we have used CSS margin property to align flexbox columns left and right.

We have used "display: flex;" to make a flexbox which makes it's child elements flex items.
To align flexbox columns to left, We have used right class selector and "margin-right: auto;" which sets the right margin taking all the available space on the right side making flex columns left aligned.
To align flexbox columns to right, We have used left class selector and "margin-left: auto;" which sets the left margin taking all the available space on the left side making flex columns right aligned.
To align flexbox columns to left and right, We have used endLeft class selector and "margin-right: auto;" which aligns the content to left and right.

Example

<!DOCTYPE html>
<html>
<head>
    <title>
        Align flexbox columns left and right using CSS
    </title>
    <style>
        .container {
            display: flex;
        }
        .box {
            height: 200px;
            background-color: #04af2f;
            color: white;
            border: 1px solid white
        }
        .right {
            margin-right: auto;
        }
        .left {
            margin-left: auto;
        }
        .endLeft {
            margin-right: auto;
        }
        .para {
            text-align: center;
            border: 1px solid black;
            background-color: #2b0240;
            color: white;
        }
    </style>
</head>
<body>
    <h3>
        To align flexbox columns left and right
        using CSS
    </h3>
    <p>
        In this example we have used
        <strong>margin</strong> property to align
        flexbox columns to left using CSS.
    </p>
    <p class="para">
        Aligning flex Columns to left.
    </p>
    <div class="container">
        <div class="box">Left Column</div>
        <div class="right box">Right Column</div>
    </div>
    <P class="para">
        Aligning flex Columns to right.
    </P>
    <div class="container">
        <div class="left box">Left Column</div>
        <div class="box">Right Column</div>
    </div>
    <P class="para">
        Aligning flex Columns to left & right.
    </P>
    <div class="container">
        <div class="endLeft box">Left Column</div>
        <div class="endRight box">Right Column</div>
    </div>
</body>
</html>

Conclusion

In this article, we have understood how to align flexbox columns left and right using CSS. we have discussed three different approaches for which are: by using align-Content property, justify-Content property and by using margin property. We can use any of the above three approaches.

Riya Kumari

Updated on: 2024-07-23T16:17:47+05:30

21K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started