Flex Row space between wrapped items

Question

What is the most dynamic way of having any amount of rows with any amount of items with a set margin between all the items? Right now the only thing that works for me is to wrap each item in a wrapper set the flex basis to the wrapper and the margin to the child. The issues with this is I loose the ability to have each row the same height of the tallest content in the row.

Case 1: Only margin bottom https://jsfiddle.net/6oaney4e/6/

This works well because the content keep the height of the tallest item on each row

html

<div class="wrapper">
  <div class="item">
  text
  </div>
  <div class="item">
  text
  <br>
  line2
  </div>
  <div class="item">
  text
  </div>
  <div class="item">
  text
  </div>
</div>

css

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item{
  flex: 0 0 50%;
  background: orange;
  margin-bottom: 10px;
}

Case 2: All around margin https://jsfiddle.net/6oaney4e/7/

Here for some reason the rows break I'm guessing that's because the row cant fit the items in with the extra margin on the side.

html same as CASE 1

css

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item{
  flex: 0 0 50%;
  background: orange;
  margin: 10px;
}

Case 3: Wrapping items and adding margin to the inner item https://jsfiddle.net/6oaney4e/8/

That worked but now the items on each row arent really aware of each other and cant have the same height.

html

<div class="wrapper">
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  <br>
  line2
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
</div>

css

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item-wrap{
  flex: 0 0 50%;
}
.item{
  background: orange;
  margin: 10px;
}

Is there a way to keep the HTML as in CASE 1 (without the div.item-wrap), have the items on each row the same height as in CASE 1 and have the spacing work like in CASE 3?

Answer 1

Ideally, you do want to use rows and make the .item-wrap divs flex-parents too.

.wrapper {
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}

.item-wrap {
  flex: 0 0 50%;
  display: flex;
}

.item {
  background: orange;
  margin: 10px;
  flex: 1;
}

<div class="wrapper">
  <div class="item-wrap">
    <div class="item">
      text
    </div>
  </div>
  <div class="item-wrap">
    <div class="item">
      text
      <br> line2
    </div>
  </div>
  <div class="item-wrap">
    <div class="item">
      text
      <br> line2
      <br> line3
    </div>
  </div>
  <div class="item-wrap">
    <div class="item">
      text
    </div>
  </div>
</div>

However if you must retain the existing structure, you'll need to use calc to adjust the flex-basis. Something like this:

.wrapper {
  display: flex;
  flex-flow: row wrap;
  background: green;
  justify-content: space-between;
}

.item {
  flex-grow:0;
  flex-shrink:0;
  flex-basis:calc(50% - 10px); /* separate properties for IE11 upport */
  background: orange;
  margin: 5px;
}

<div class="wrapper">
  <div class="item">
    text
  </div>
  <div class="item">
    text
    <br> line2
  </div>
  <div class="item">
    text
    <br> line2
    <br> line3
  </div>
  <div class="item">
    text
  </div>
</div>