为何align-items:flex-start与flex-wrap:wrap会导致元素布局异常？

原因分析 #

你给.rack设置了align-items: flex-start，但这个属性只负责单行内的项目在垂直方向（交叉轴）的对齐。因为容器有固定高度，当flex项目换行后，flex布局会用align-content属性分配多行之间的剩余空间——它的默认值是stretch，会把容器的剩余高度均匀分摊到各行之间，导致第二行被“挤”到下方，看起来没有对齐顶部。

修复方案 #

给.rack添加align-content: flex-start，让所有弹性行都紧贴容器顶部，不再分配多余空间：

.rack {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start; /* 新增这一行 */
}

补充说明 #

• align-items：控制单行内每个项目在交叉轴的对齐方式
• align-content：控制多行之间的空间分配，仅当flex容器有多行时生效

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