Giving wrapped flexbox items vertical spacing

Solution 1:

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.

Solution 2:

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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<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>

Solution 3:

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.