CSS Flexbox Layout

Last Updated : 26 Sep, 2024

CSS Flexbox is a modern layout system to simplifies the arrangement of elements within a container. It allows elements to adjust and distribute space dynamically. If we use Flexbox in our webpage then it will also help us with responsive designs.

These are the following approaches for achieving CSS Flexbox Layout:

Table of Content

CSS Flexbox Properties
Using Justify Content
Using Align Items
Using Flex Direction

CSS Flexbox Properties

Value	Description
display: flex	Converts an element into a flex container.
justify-content	Aligns flex items along the main axis.
align-items	Align the flex items along the cross-axis to create created container cross-axis container items.
flex-direction	Defines the direction of the main axis (row, column, reverse).
flex-wrap	Controls whether items should wrap to the next line.
align-self	Allows individual items to override align items, for vertical alignment.

Using Justify Content

At first,cross-axis create align a basic HTML structure.
After that create a div with a class name "container" to wrap the flexbox layout. Inside this container, create three child div elements with the class name "item", which will represent the flexbox items.
After that, inside the style tag, we will define the CSS needed for the Flexbox layout and use the "justify-content: space-between" property toon put the items in the main axis.

Syntax:

justify-content: space-between;

Example: This example shows the implementation of the above approach.

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>CSS Flexbox Layout Examples</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .example-container {
            width: 50%;
            background-color: #fff;
            border: 2px solid #ccc;
            margin-bottom: 30px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .example-heading {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
        }

        .container {
            display: flex;
            justify-content: space-between;
            border: 2px solid #ccc;
            padding: 10px;
        }

        .item {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
            width: 100px;
        }
    </style>
</head>

<body>
    <div class="example-container">
        <div class="example-heading">Justify Content: space-between</div>
        <div class="container">
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
        </div>
    </div>
</body>

</html>

Output:

Using-Justify-Content — Using Justify Content

Using Align Items

First , create a basic HTML structure.
Then inside the container, creates the three "div" elements (with the createsclass item) of different heights to showcase the effect of the "align-items" property.
After that, inside the style tag, we will define the CSS needed for the Flexbox layout and use the "align-items: stretch" property to align the flex items along the cross-axis.

Syntax:

align-items: stretch;

Example: This example shows the implementation of the using align-items,

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>CSS Flexbox Layout Examples</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .example-container {
            width: 50%;
            background-color: #fff;
            border: 2px solid #ccc;
            margin-bottom: 30px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .example-heading {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
        }

        .container {
            display: flex;
            align-items: stretch;
            height: 200px;
            border: 2px solid #ccc;
            padding: 10px;
        }

        .item {
            background-color: #FF5722;
            color: white;
            padding: 10px;
            text-align: center;
            width: 100px;
        }

        .item-1 {
            height: 50px;
        }

        .item-2 {
            height: 100px;
        }

        .item-3 {
            height: 150px;
        }
    </style>
</head>

<body>
    <div class="example-container">
        <div class="example-heading">Align Items: stretch</div>
        <div class="container">
            <div class="item item-1">Item 1</div>
            <div class="item item-2">Item 2</div>
            <div class="item item-3">Item 3</div>
        </div>
    </div>
</body>

</html>

Output:

Using Flex Direction

Created container cross-axis container in a basic HTML structure.
After that add three "div" elements inside the container to represent flex items. And put the class name "item" for all the divs.
After that, inside the style tag, we will define the CSS needed for the Flexbox layout and use the "display: flex" property.

Example: This example shows the implementation of the above approach.

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>CSS Flexbox Layout Examples</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .example-container {
            width: 25%;
            background-color: #fff;
            border: 2px solid #ccc;
            margin-bottom: 30px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .example-heading {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
        }

        .container {
            display: flex;
            flex-direction: column;
            border: 2px solid #ccc;
            padding: 10px;
        }

        .item {
            background-color: #2196F3;
            color: white;
            padding: 10px;
            text-align: center;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div class="example-container">
        <div class="example-heading">Flex Direction: column</div>
        <div class="container">
            <div class="item">Item 1</div>
            <div class="item">Item 2</div>
            <div class="item">Item 3</div>
        </div>
    </div>
</body>

</html>