Open In App

How to set space between the flexbox ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn How to set space between the flexbox, Flexible Box Module or Flexbox is a type of layout model. The main aim of this layout is to distribute space between items in a container. This layout is a one-dimensional layout model. The flexbox layout even works when the size of the items is unknown or dynamic. To set space between flex items in a flexbox, use the justify-content property with a value of space-between or space-around, or use the gap property to set the spacing between flex items.

Approach 1: In this approach, we are using the justify-content property.

 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;

The below example will illustrate the property used for setting space between the flexbox. 

Example: 

html




<!DOCTYPE html>
<html>
<head>
    <title>Space between flexbox</title>
    <style>
        .flex2 {
            display: flex;
            justify-content: space-around;
            background-color: green;
        }
 
        .flex3 {
            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;
        }
 
        h3 {
            text-align: center;
        }
 
        .geeks {
            font-size: 40px;
            text-align: center;
            color: #009900;
            font-weight: bold;
        }
    </style>
</head>
   
<body>
    <div class="geeks">GeeksforGeeks</div>
    <h3>Space between flexbox</h3>
 
    <br>
    <b>justify-content: space-around </b>
    <div class="flex2">
        <div class="flex-items">1</div>
        <div class="flex-items">2</div>
        <div class="flex-items">3</div>
    </div>
    <br>
    <b>justify-content: space-between </b>
    <div class="flex3">
        <div class="flex-items">1</div>
        <div class="flex-items">2</div>
        <div class="flex-items">3</div>
    </div>
    <br>
 
</body>
</html>


Output:

 

Approach 2: In this approach, we are using the gap property to set space between the flexbox.

Syntax:

gap: value;

Example: In this example, we are using the above-explained property.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex;
            gap: 20px;
            /* Set the desired spacing between flex items */
        }
 
        .flex-item {
            background-color: lightblue;
            padding: 10px;
        }
 
        .geeks {
            font-size: 40px;
 
            color: #009900;
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <div class="geeks">GeeksforGeeks</div>
    <h3>Using 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:

 



Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads