How to Set Space Between the Flexbox?

Last Updated : 21 Oct, 2024

Flexbox (or Flexible Box) is a CSS module used to design complex layouts easily and efficiently. The main feature of Flexbox is to control the spacing between the flex items.

Below are the methods to set space between the flexbox:

Table of Content

Using justify-content Property
Using gap Property

Approach 1: Using justify-content Property

The justify-content property in CSS Flexbox aligns flex items along the main axis. It can distribute space between items with values like flex-start, flex-end, center, space-between, space-around, and space-evenly, controlling the alignment and spacing within a flex container.

Syntax:

The value space-between is used for displaying flex items with space between the lines.

justify-content: space-between;

The value space-around is used for displaying flex items with space between, before and after the lines.

justify-content: space-around;

Example: This example demonstrates using justify-content in CSS Flexbox to distribute space between items. space-around creates equal space around items, while space-between places equal space between items.

html

<!DOCTYPE html>
<html>

<head>
    <title>Space between flexbox</title>

    <style>
        h1 {
            color: #009900;
        }

        h1,
        h3 {
            text-align: center;
        }

        .flex1 {
            display: flex;
            justify-content: space-around;
            background-color: green;
        }

        .flex2 {
            display: flex;
            justify-content: space-between;
            background-color: green;
        }

        .flex-items {
            background-color: #f4f4f4;
            width: 100px;
            height: 50px;
            margin: 10px;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <h3>Space between flexbox</h3>

    <h4>justify-content: space-around </h4>
    <div class="flex1">
        <div class="flex-items">1</div>
        <div class="flex-items">2</div>
        <div class="flex-items">3</div>
    </div>

    <h4>justify-content: space-between </h4>
    <div class="flex2">
        <div class="flex-items">1</div>
        <div class="flex-items">2</div>
        <div class="flex-items">3</div>
    </div>
</body>

</html>

Output:

Approach 2: Using gap Property

The gap property sets the space between Flexbox or Grid items. It is a shorthand for row-gap and column-gap, making it easy to manage spacing consistently without extra margins or padding, improving layout control and readability.

Syntax:

gap: value;

Example: In this example, we are using the gap property along with the flexbox property to add gap between the individual items.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Space Between the Flexbox</title>

    <style>
        h1 {
            color: #009900;
        }

        h1,
        h3 {
            text-align: center;
        }

        .flex-container {
            display: flex;
            gap: 100px;
            background-color: green;
        }

        .flex-item {
            background-color: #f4f4f4;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <h3>Using CSS gap Property</h3>

    <div class="flex-container">
        <div class="flex-item">Element 1</div>
        <div class="flex-item">Element 2</div>
        <div class="flex-item">Element 3</div>
    </div>
</body>

</html>

Output:

How to Add Space Between Elements in Tailwind CSS ?

ankit0812

Improve

Article Tags :

How to Set Space Between the Flexbox?

Approach 1: Using justify-content Property

Syntax:

Approach 2: Using gap Property

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?