如何在Flexbox列布局中实现列表区域等高？

当然可以不用JavaScript！Flexbox本身就有能力帮你实现这个需求，根本不需要手动计算高度~

问题根源 #

你当前的布局只在.columns层面设置了display:flex，这会让两个.col元素本身等高，但里面的.list并没有被拉伸填充整个.col的剩余空间，所以才会出现高度不一致的情况。

解决方案（仅修改CSS） #

只需要给.col添加Flex容器属性，再让.list占据剩余空间即可：

.columns { display: flex; }
.col { 
  margin-left: 20px;
  display: flex; /* 将col转为flex容器 */
  flex-direction: column; /* 内部元素垂直排列 */
}
ul { margin: 0; }
.list { 
  padding: 24px; 
  border: 1px solid blue;
  flex: 1; /* 让list自动填充col内的剩余垂直空间 */
}

HTML部分保持你原来的结构不变：

<div class="columns">
 <div class="col">
 <h3>Header</h3>
 <div class="list">
 <ul>
 <li>List item</li>
 <li>List item</li>
 </ul>
 </div>
 </div>
 <div class="col">
 <h3>Header</h3>
 <div class="list">
 <ul>
 <li>List item</li>
 <li>List item</li>
 <li>List item</li>
 <li>List item</li>
 </ul>
 </div>
 </div>
 </div>

原理说明 #

• 当.col成为flex容器并设置垂直排列后，它的子元素（h3和.list）会按垂直方向分布
• flex:1会让.list自动占据.col中除标题外的所有可用垂直空间。由于外层flex容器已经让两个.col等高，所以它们的.list自然会同步高度，完美匹配最长的那个列表区域。

这样修改后，就能实现你想要的所有列表边框高度一致的效果啦~

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