如何在flex:1的等高列div中垂直对齐内容且不破坏高度？

嘿，我懂你的困扰！你用flex容器+flex:1的列实现了等高效果，但尝试用margin-top: auto和margin-bottom: auto垂直对齐内容时，却破坏了列的高度——这是因为当你给flex项（也就是.col）设置上下margin为auto时，flex容器会把剩余的垂直空间全部分配给这些margin，导致列本身的高度被挤压，自然没法保持等高了。

给你两个简单靠谱的解决方案：

方案1：给列添加内部flex容器（无副作用，推荐） #

在每个.col里面套一个内层容器，让内层容器处理内容的垂直对齐，外层的.col依然保持flex:1的等高特性：

.container { 
  width: 100%; 
  display: flex; 
}
.col { 
  flex: 1; /* 不用额外设置width:50%，flex:1会自动平分容器宽度 */
  background: pink;
  padding: 1rem; /* 可选，加内边距让内容不贴边 */
}
.col-inner {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 这里控制垂直对齐：center=居中，flex-start=顶部，flex-end=底部 */
  min-height: 100%; /* 确保内层容器撑满外层列的高度 */
}

对应的HTML结构：

<div class="container">
  <div class="col">
    <div class="col-inner">
      <h1>This is text</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
  </div>
  <div class="col">
    <div class="col-inner">
      <p>只有一段短文本，也能和左边等高且垂直居中</p>
    </div>
  </div>
</div>

方案2：直接把列本身设为flex容器（更简洁） #

如果不想额外嵌套标签，也可以直接给.col添加flex属性，让它自身成为flex容器控制内容对齐，同时保留flex:1的等高效果：

.container { 
  width: 100%; 
  display: flex; 
}
.col { 
  flex: 1; 
  background: pink;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 同样可以换成flex-start/flex-end调整对齐方式 */
  padding: 1rem;
}

HTML结构不用修改，直接用你原来的即可：

<div class="container">
  <div class="col">
    <h1>This is text</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div class="col">
    <p>短文本也能保持等高并垂直对齐</p>
  </div>
</div>

这两种方法都能完美解决你的问题：外层列保持等高，内部内容可以自由垂直对齐，完全不会破坏原来的布局~

内容的提问来源于stack exchange，提问作者user1038814