Flexbox列布局中实现顶部元素等高的方法

我太懂你这个需求了——用Flexbox做列布局时，想让每列的顶部内容块自动等高，又绝对不能用固定高度（毕竟用户调个字体大小、CMS里改个内容长度，固定高度直接就崩了）。其实只要对列的内部布局做一点小调整，用Flexbox本身的特性就能完美解决！

先给你看可直接运行的完整方案：

完整HTML代码 #

<div class="wrapper">
  <div class="column">
    <div class="header">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class="info">
      <div class="infoRows">
        <p>Needs to align</p>
        <p>Something</p>
        <p>Something</p>
        <p>Something</p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="header">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class="info">
      <div class="infoRows">
        <p>Needs to align</p>
        <p>Something</p>
        <p>Something</p>
        <p>Something</p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="header">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class="info">
      <div class="infoRows">
        <p>Needs to align</p>
        <p>Something</p>
        <p>Something</p>
        <p>Something</p>
      </div>
    </div>
  </div>
  <div class="column">
    <div class="header">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae mauris arcu. Donec et lorem ac nulla scelerisque egestas.
    </div>
    <div class="info">
      <div class="infoRows">
        <p>Needs to align</p>
        <p>Something</p>
        <p>Something</p>
        <p>Something</p>
      </div>
    </div>
  </div>
</div>

对应CSS代码 #

.wrapper {
  display: flex;
  justify-content: center;
  flex-direction: row;
  @media (max-width: 900px) {
    flex-direction: column;
  }
}

.column {
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.info {
  display: flex;
  flex: 1;
  align-items: end;
}

.infoRows {
  flex-direction: column;
  width: 100%;
}

.infoRows p {
  border-top: 1px solid black;
  text-align: center;
}

关键原理说明 #

这里的核心改动其实就两点：

1. 把.column设置为display: flex; flex-direction: column;，让它从普通容器变成垂直方向的Flex容器，这样内部的.header和.info就成了弹性项
2. 给.info加上flex: 1，让它自动占据.column里除了.header之外的所有剩余空间，再配合align-items: end;，让下面的内容块自动对齐到同一水平线

这样不管某一列的.header内容多长，所有列的.header都会自动适应最高的那个的高度，完全不用固定数值，完美适配内容变化和字体调整！

备注：内容来源于stack exchange，提问作者Sternjobname