Flexbox实现所有卡片等高问题（兼容IE11）

嘿，我来帮你搞定这个等高卡片的问题！你现在的核心问题是没利用好Flexbox的嵌套布局逻辑，再加上IE11对Flexbox有一些特殊的兼容要求，我给你一步步拆解解决方案：

问题分析 #

你之前尝试给容器设置flex-direction: column，但这是把容器内的元素改成纵向排列，而你需要的是横向排列的卡片保持等高，所以应该调整卡片内部的布局，同时修正容器的对齐方式。

解决方案步骤 #

1. 让容器内的卡片自动拉伸等高 #

把容器的align-items: flex-start改成align-items: stretch，这样所有卡片会自动拉伸到容器的最大高度：

#container { 
  background-color: white; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  align-items: stretch; /* 关键修改：让卡片拉伸至容器高度 */
  justify-content: space-around; 
  padding: 5% 5%; 
}

2. 给卡片设置内部Flex布局 #

让卡片本身成为Flex容器，纵向排列内部元素，这样内容区域可以自动填充剩余空间，保证所有卡片的底部对齐：

.card { 
  text-align: center; 
  border: 1px solid black; 
  width: 31.33333%; 
  margin: 1%; 
  display: flex; /* 让卡片成为Flex容器 */
  flex-direction: column; /* 内部元素纵向排列 */
  flex: 1 1 auto; /* 兼容IE11的flex写法，避免宽度异常 */
}

3. 让内容区域填充剩余空间 #

给卡片的内容部分添加flex: 1，这样不管内容多少，都会撑满卡片的剩余高度，确保所有卡片高度一致：

.card-content {
  flex: 1; /* 让内容区域自动填充剩余空间 */
}

完整修改后的代码 #

CSS #

#container { 
  background-color: white; 
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  align-items: stretch; 
  justify-content: space-around; 
  padding: 5% 5%; 
} 

.card { 
  text-align: center; 
  border: 1px solid black; 
  width: 31.33333%; 
  margin: 1%; 
  display: flex; 
  flex-direction: column; 
  flex: 1 1 auto; 
}

.card-content {
  flex: 1;
}

#container>.card>.card-image>img { 
  display: block; 
  width: 100%; 
}

HTML #

<section id="container"> 
  <div class="card"> 
    <div class="card-image"> 
      <img src="http://www.stevensegallery.com/600/400" /> 
    </div> 
    <div class="card-content"> 
      <h3 class="card-title">Title 1</h3> 
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos, sit sale mollis ut. Per vocent laoreet democritum no, cu pri sumo omnesque. Et accommodare intellegebat qui. Vix ne mundi primis.</p> 
    </div> 
  </div> 
  <div class="card"> 
    <div class="card-image"> 
      <img src="http://www.stevensegallery.com/600/400" /> 
    </div> 
    <div class="card-content"> 
      <h3 class="card-title">Title 2</h3> 
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea, ne quo quot viderer. Ius ex laudem feugait tractatos</p> 
    </div> 
  </div> 
  <div class="card"> 
    <div class="card-image"> 
      <img src="http://www.stevensegallery.com/600/400" /> 
    </div> 
    <div class="card-content"> 
      <h3 class="card-title">Title 3</h3> 
      <p>Lorem ipsum dolor sit amet, per wisi movet ludus ea</p> 
    </div> 
  </div> 
</section>

IE11兼容说明 #

• 避免使用简写的flex: 1，改用flex: 1 1 auto，因为IE11对简写的解析会忽略flex-basis，导致卡片宽度异常；
• 确保所有Flex容器的属性都写全，避免遗漏flex-direction等关键属性；
• 图片设置display: block你已经做了，这能避免图片下方的空白，没问题。

这样调整后，你的三张卡片就能完美保持等高，而且完全兼容IE11啦！

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