html - 如何处理高度不同的 flex 元素?

标签 html css flexbox

<分区>

我创建了 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% 看起来工作正常,但它看起来很老套。

最佳答案

您可以只删除 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>

关于html - 如何处理高度不同的 flex 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48328360/

相关文章:

javascript - 带方括号的选择器不返回对象

javascript - polymer 属性不在元素中

css - 无法使用 tailwind css 使图像响应

html - 图像上的重叠 div

javascript - 仅当 cookie 存在时才添加Class,否则隐藏

css - 如何在 bootstrap responsive 中创建媒体查询

jquery - 滚动到背景的末尾

javascript - Input type=[number] 在显示时将 float 转换为 int

javascript - CSS Flex Center 和 Masonry JS 冲突

css - 使一排大图像适合 flexbox