Giving wrapped flexbox items vertical spacing

html css flexbox

I've recently been playing with Flexbox for the first time and, in general, it's absolutely amazing. I've encountered an issue recently however, where I cannot seem to give flex items that are wrapping any vertical spacing.

I've tried using:

align-content: space-between;

but this doesn't seem to do anything. From the reading I've done, this would only seem to work if my flex container is taller than the elements contained within (is this right?) If so, then would I not have to set a height for my flex-container, which would seem to defeat the purpose of using flexbox?

The only way I can think of to make this work would be to give bottom margin to the elements within, but again this seems to defeat the purpose.

Hopefully I'm missing something fairly obvious - here's a link to a codepen: http://codepen.io/lordchancellor/pen/pgMEPz

Also, here's my code:

HTML:

<div class="container">
   <div class="col-sm-12">
     <h1>Flexbox Wrapping</h1>

     <div class="flexContainer">
       <div class="flexLabel">This is a flex label</div>

       <a class="btn btn-primary">Button 1</a>
       <a class="btn btn-warning">Button 2</a>
       <a class="btn btn-success">Button 3</a>
     </div>
   </div>
 </div>

CSS:

.flexContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-between;
  justify-content: center;
}
.flexContainer .flexLabel {
  flex-basis: 150px;
  flex-shrink: 0;
}

EDIT - Just going to add a little more detail here, as I'm not sure I'm putting it across well enough.

In my larger project, I have some block level elements that are arranged in a row using flexbox. However, there needs to be some responsiveness as the user may reduce the screen width. At this point, I want my elements to begin to stack (hence the wrap). However, as the elements begin to stack, they are all touching vertically, where I want there to be spacing.

It's beginning to look like top and bottom margins may be the only way to resolve this - however I was wondering if there was a flexbox-centric way to achieve this.

JRulle

I had a similar issue and I used the following hack to solve the issue.

    /* add a negative top-margin to the flex container */
.flexContainer {
        /* ... your existing flex container styles here */
    margin: -10px 0 0 0;
} 
    /* add a corresponding positive top margin to all flex items (all direct children of the flex container) */
.flexContainer > * {
    margin-top: 10px;
}

For the top row of flex items the negative and positive margins cancel out, for the subsequent rows it adds the margin between the rows (in this case 10px between rows).

It's less than elegant but it gets the job done.

Why are negative margins considered a hack?

In this case, because this is not margin's desired use to fix flexbox gaps and margin is used in cooperation with another margin in another object to affect the appearance of the other object. So, this makes it less elegant because it can easily be considered bad practice for spaghetti logic (change object A to fix object B + unorthodox use of margin to fix flexbox). I think that the solution though is nice, apart from the hacky aspect of it which is not for OP to blame but CSS & browsers themselves for not having a clean way to solve this.

Apparently that's the way to do it, at least according to Mozilla :) developer.mozilla.org/en-US/docs/Web/CSS/…

Paulie_D

If you force wrapping by applying a width you can then use margins as you normally would without setting a height.

.flexContainer { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; background: pink; width: 150px; } .flexContainer > * { margin: 1em 0; } .flexContainer .flexLabel { flex-basis: 150px; flex-shrink: 0; }

Flexbox Wrapping

This is a flex label

Button 1 Button 2 Button 3

The no wrap seems to be a typo though because it's overwritten two lines later with flex-wrap: wrap;

Yes you're absolutely right, the nowrap was an idiotic typo, as I lifted this code snippet from my larger project!

The question has been edited now but the fact remains is the the items are not wrapping because the parent is wide enough to accommodate them.

It will space elements across a known height but not if you don't set one, how could it?

@lordchancellor You probably already know this, but for those who don't, column-gap and row-gap are what to use to set vertical and horizontal gutters for flexbox displays. (I don't know how well they were supported in 2016.) You can also use gap to set both at once if they are the same.

Fabian Amran

row-gap would solve your problem

.flexbox {
    display: flex;
    column-gap: 10px;
    row-gap: 10px
}

This should be the accepted answer. Not supported by IE11, but otherwise solid support.

tenor528

It's because you don't have a height on your flex content for it to calculate the space-between so at the moment, the flex container is as small as possible. Add a height and it should work.

Maybe what you're looking for is flex-direction: column? Not sure.

A little late to the party but for those searching... Additionally to this, you could a bottom margin to each element

Zohar

Another hacky solution is to give the item a bottom border:

border-bottom: 10px solid transparent;

Useful for cases when the height is 100%

Why not use a transparent border while you're at it? Makes this just a little less hacky.

What is the advantage to using border over margin?

Giving wrapped flexbox items vertical spacing

Flexbox Wrapping

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Links

Contact US