尝试将Flex项目对齐到底部，却对齐到文本第一行

我明白你遇到的困扰了——原本想用Flex布局让父容器里的多个子div底部对齐，有图片的时候效果很好，但一旦文本内容过长换行，所有元素都会跑偏到文本第一行的位置，完全达不到底部对齐的预期。

问题根源就在你设置的align-items: baseline上：这个属性是让所有子元素对齐内部文本的基线，当文本换行时，这个基线会变成第一行文本的基线，所以其他子元素（比如图片容器）就会跟着对齐到这个位置，而不是容器的底部边缘。

快速解决方法 #

把align-items: baseline替换成align-items: flex-end，就能让所有子元素牢牢对齐到父容器的底部，不管文本是否换行都能保持一致的对齐效果：

.objet { 
  position: relative; 
  line-height: 0; 
} 
.image { 
  border: 1px solid #aaa; 
} 
.liste { 
  border: 1px solid #f00; 
  display: flex; 
  align-items: flex-end; /* 替换原来的baseline */
  justify-content: flex-start; 
} 
.texte { 
  line-height: normal; 
}

为什么这个方法有效？ #

• align-items: flex-end：强制所有子元素对齐到Flex容器交叉轴（这里是垂直方向）的末端，也就是父容器的底部，完全不受子元素内部文本换行的影响。
• 而原来的baseline对齐逻辑只关注文本的基线位置，一旦文本换行，基线位置就不再是容器底部，自然会导致对齐混乱。

如果之后你有更复杂的对齐需求（比如部分元素要基线对齐，部分要底部对齐），可以给特定子元素单独设置align-self属性来调整，不过针对你当前的场景，flex-end已经能完美解决问题啦。

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