Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，当一个项目占用的高度超过＆＃34;正常＆＃34;物品，它看起来比它旁边的物品大得多，因此有点奇怪。有没有办法优雅地处理这个问题，例如。使每一行的物品高度相同吗？

此外，是否有更好的方法来处理指定容器的列宽，而不是响应调整大小？我想要两个列，并且使用填充，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>

如何处理高度不同的柔性物品？

1 个答案: