如何处理具有不同高度的弹性项目？ [复制]

Question

我使用以下标记创建了this Plunker：

.items {
  display: flex;
  align-items: center;
  padding: 10px;
  -webkit-flex-flow: row wrap;
}

.items span {
  border: 1px solid #888;
  margin: 5px;
  padding: 10px;
  width: 35%;
}

<div class="row-fluid">
  <div class="span8">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="span4" style="border: 1px solid red">
    <div class="items">
      <span>First</span>
      <span>Second</span>
      <span>Third</span>
      <span>Fourth</span>
      <span>Fifth which has more text than others</span>
      <span>Sixth</span>
      <span>Seventh</span>
      <span>Eighth</span>
      <span>Ninth</span>
      <span>Tenth</span>
      <span>Eleventh</span>
      <span>Twelfth</span>
    </div>
  </div>
</div>

如您所见，当一个项目比“正常”项目占据更多高度时，它看起来比它旁边的项目大，因此有点奇怪。有没有办法优雅地处理这个问题，例如。使每行中的项目高度相同？

另外，有没有比响应式调整大小更好的方法来处理指定容器的列宽？我想要两列，加上填充，width: 35% 似乎可以正常工作，但看起来很hacky。

Answer 1

您可以只删除align-items: center，也可以使用calc() 作为列宽。因此，如果您想要两列，您可以使用calc(50% - 10px)，其中 10px 是5px margin * 2 用于左侧和右侧，对于填充，您可以使用box-sizing: border-box。

* {
  box-sizing: border-box;
}
.items {
  display: flex;
  padding: 10px;
  flex-flow: row wrap;
}
.items span {
  border: 1px solid #888;
  margin: 5px;
  padding: 10px;
  flex: 0 0 calc(50% - 10px);
}

<div class="items">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, dolores!</span>
  <span>Sixth</span>
  <span>Seventh</span>
  <span>Eighth</span>
</div>