为什么设置换行的flex-direction:column布局的列之间会出现大量空白？

两列之间的空白是Flex布局align-content属性的默认值导致的，具体逻辑：

• Flex容器#container未设置固定宽度，默认撑满父级（body）的可用宽度，水平方向存在大量剩余空间。
• 单个.child的实际占用高度为120px（上下margin20px + 内容高度65px + 上内边距35px），300px高的容器第一列最多放下2个元素，剩余空间不足以放下第三个元素，因此第3、4个元素自动换到第二列。
• align-content用于控制Flex容器内多根轴线的分布规则，你未显式配置该属性，默认值normal会将多列沿水平方向均匀分配剩余空间，最终形成两列之间的空白。

给#container新增align-content: flex-start配置，让所有列沿水平方向起始位置排列即可消除空白：

<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<style>
body {background-color: #995DB5;}
#container {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start; /* 新增这行代码 */
  border: 5px solid white;
}
.child {
  width: 100px;
  height: 65px;
  margin: 10px;
  padding-top: 35px;
  background-color: #F7941F;
  text-align: center;
  font-size: 30px;
}
</style>
</head>
<body>
<div id="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>
</body>
</html>

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