Better Way to Set Distance Between Flexbox Items

Better way to set distance between flexbox items

Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Better way to set distance between flexbox items

Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

Demo

.upper {
  margin: 30px;
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 80px;
  border: 1px red solid;

  padding: 5px; /* this */
}

.upper > div {
  flex: 1 1 auto;
  border: 1px red solid;
  text-align: center;

  margin: 5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
  flex-direction: column;
  flex-wrap: wrap;
  width: 200px;
  height: 200px;
}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Adding space between flexbox items

There a few things you have to consider.

First of all; with justify-content you define how remaining space is handled. By using space-between your items will be aligned so that the space between them is equal, by setting it to center the remaining space will be around all items, with all items stuck together.

In your case though, there is no remaining space, because your items actually stretch the div. So that doesn't help you.

Next; you've set the width of an item to 50%. Which is fine, your item's will be 50% of the viewport. That's because your grid will implicitly be 100% of the viewport. But because your image overflows the box, you can set margins if you want, and they will put the items further apart, but you need big-ass margins to actually see them. Bigger then the overflowing of your image.

So, to fix this, you make the images responsive by making them as width as the item;

.item img { display: block; height: auto; width: 100%; }

But that poses another problem; flexbox tries to size it's flex items to fit it all into the flex container. So you'll see that it automatically resizes your items so they will all fit in. To fix this, you have to explicitly force the width of your items;

.item { flex: 0 0 50%; }

Which is a shorthand for;

.item { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; }

So basically you say; make my item 50% of it's container, and don't use your awesome algorithm to try to make it bigger or smaller.

Now you've got what you want, and you can use margin-right: 20px for example to create a 20px space between your items.

Full snippet;

.grid { display: flex; width: 100%; }
.item { flex: 0 0 50%; margin-right: 20px; }.item img { display: block; height: auto; width: 100%; }
.article-scroll-mobile {  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);  flex-wrap: nowrap;  text-align: center;  overflow-x: auto;  -webkit-overflow-scrolling: touch;  /*For iOS smooth scroll effect*/}

<div class="grid article-scroll-mobile">  <div class="item">    <img src="https://www.w3schools.com/howto/img_fjords.jpg">  </div>  <div class="item">    <img src="https://www.w3schools.com/howto/img_fjords.jpg">  </div>  <div class="item">    <img src="https://www.w3schools.com/howto/img_fjords.jpg">  </div>  <div class="item">    <img src="https://www.w3schools.com/howto/img_fjords.jpg">  </div>  <div class="item">    <img src="https://www.w3schools.com/howto/img_fjords.jpg">  </div>  <div class="item">    <img src="https://www.w3schools.com/howto/img_fjords.jpg">  </div></div>

Set space-between between flex list items

Using margin-left on the last element is a good solution. However, you can improve your implementation by using the :last-child selector:

ul li:last-child {
  margin-left: 10px;
}

Instead of manually assigning the last class to the last child.

EDIT: If you mean you want your last child to be aligned all the way to the right. You can separate them into different lists, and use justify-content: space-between:

.container {
  max-width: 1000px;
  background-color: lightblue;
  display: flex;
  justify-content: space-between;
}

ul {
  display: flex;
}

ul li {
  width: 3rem;
}

.right li {
  background-color: red;
}

<div class="container">
  <ul class="left">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
  <ul class="right">
    <li>Item</li>
  </ul>
</div>

Spacing between flexbox items

The CSS spec has recently been updated to apply gap properties to flexbox elements in addition to CSS grid elements. This feature is supported on the latest versions of all major browsers. With the gap property, you can get what you want with just gap: 10px (or whatever size you want).

CSS3 Flexbox spacing between items

Nope - you're not missing anything. Flexbox is terrific for ordering elements and defining the general alignment of those elements along either the main or cross axes, but doesn't speak directly to individual item spacing. If you take a look at this Codepen used in the Flexbox article, you'll notice they use:

margin-top: 10px

to define element spacing. Hope this helps!

Creating a space between flex items in nested flexbox

Set Width of nav-links or use column-gap

        .navbar-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .nav-links {
            width: 300px;
            // column-gap: 30px;
            display: flex;
            justify-content: space-between;
        }

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>

<body>

    <div class="navbar-container">
        <a href="index.html">
            <div class="logo">
                <img src="./media/logo.svg" alt=" logo" height="80px" width="80">
            </div>
        </a>
        <ul class="nav-links">
            <li class="nav-link">
                <a href="#">Install</a>
            </li>
            <li class="nav-link">
                <a href="#">Learn</a>
            </li>
            <li class="nav-link">
                <a href="#">item</a>
            </li>
            <li class="nav-link">
                <a href="#">item</a>
            </li>

            <li class="nav-link">
                <a href="#">item</a>
            </li>

        </ul>
    </div>
</body>

</html>

Spacing between flex items

I did it by adding on the parent <section> :

 <section class="d-flex flex-wrap mb-3 mx-n3">

On the <Article> :

<article class="favorites-card d-inline-flex flex-grow-1 flex-shrink-1 m-3" data-url="http://....">

And creating a CSS class .favorites :

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .favorites-card {
    flex: 1 1 100%;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .favorites-card {
    flex: 1 1 50%;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .favorites-card {
    flex: 1 1 31%; /* that f....k 1% made all */
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .favorites-card {
    flex: 1 1 30%;
  }
}

How can I set a minimum amount of space between flexbox items?

You can add another div with flex style for holding the needed gap between inner divs. and for the minimum width for that gap use this property (as mentioned in W3Schools.com):

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

which flex-shrink is :

flex-shrink: A number specifying how much the item will shrink relative to the rest of the flexible items

so, for example you set this css code for the gap div :

flex: 1 0 10px;

that tells gap div will have 10px width, and will grow relative to the rest of the flexible items, but WON'T SHRINK. so the minimum width will be 10px at the narrowest width of the screen.

Better Way to Set Distance Between Flexbox Items

Better way to set distance between flexbox items

Better way to set distance between flexbox items

Adding space between flexbox items

Set space-between between flex list items

Spacing between flexbox items

CSS3 Flexbox spacing between items

Creating a space between flex items in nested flexbox

Spacing between flex items

How can I set a minimum amount of space between flexbox items?

Related Topics

Leave a reply