forum

Home / DeveloperSection / Forums / How do I set distance between flexbox items?

Ask Question
Sandra Emily

Sandra Emily

Follow
Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

06-Jun-2024

Set distance between flexbox items

You can use the gap property to set the distance between flexbox items. The gap property is a brief of row-gap and column-gap, and it specifies the gap between the rows and columns of a grid or flex container.

Using with flexbox

.container {
 display: flex;
 gap: 10px; /* Set the gap between flex items */
}

In the above syntax, The gap property is applied to a flex container with the .container class, and it sets a gap of 10px between flex items.

Also, you can use margins on flex items to create space between them

.item {
 margin-right: 10px; /* Set the right margin between flex items */
}

The gap property is recommended for creating space between flex items, as it is cleaner and built-in, especially when working with flexible layouts.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <style>
    /* using css gap property */
    .container {
      display: flex;
      gap: 15px; /* Set the distance between flex items */
    }
    /* using css margin property */
    .container-2{
      display: flex;
    }
    .container-2 .item-2{
       margin-right: 15px; /* Set the distance between flex items */
    }
  </style>
</head>

<body>
  <h3>Using "gap" property on parent element</h3>
  <div class="container">
    <div class="item">Item-1</div>
    <div class="item">Item-2</div>
    <div class="item">Item-3</div>
    <div class="item">Item-4</div>
  </div>
  <h3>Using "margin" in flex items</h3>
  <div class="container-2">
    <div class="item-2">Item-1</div>
    <div class="item-2">Item-2</div>
    <div class="item-2">Item-3</div>
    <div class="item-2">Item-4</div>
  </div>

</body>
</html>

Output- 

answer 6518920606070434

Also, Read: How do you create a button with borderless CSS?

MindStick Training

Liked By