包裹物品之间的 Flex Row 空间

Question

让任意数量的行和任意数量的项目在所有项目之间设置边距的最动态方式是什么？现在唯一对我有用的是将每个项目包装在包装器中，将弹性基础设置为包装器，将边距设置为子级。这样做的问题是我失去了让每一行与该行中最高内容的高度相同的能力。

案例 1：只有边距底部 https://jsfiddle.net/6oaney4e/6/

这很有效，因为内容保持了每行最高项目的高度

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

案例 2：四周边距 https://jsfiddle.net/6oaney4e/7/

由于某种原因，行中断我猜这是因为该行无法容纳侧面的额外边距的项目。

html 与案例 1 相同

css

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

案例 3：包装项目并为内部项目添加边距 https://jsfiddle.net/6oaney4e/8/

这行得通，但现在每行上的项目并没有真正了解彼此，并且不能具有相同的高度。

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

有没有办法让 HTML 与案例 1 中一样（没有 div.item-wrap），每行上的项目与案例 1 中的高度相同，并且间距与案例 3 中一样?

Answer 1

理想情况下，您确实想使用行并将 .item-wrap div 设置为 flex-parents。

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

但是如果您必须保留现有结构，则需要使用calc 调整flex-basis。像这样的：

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