align-self-end类失效：无法将最后一个div文本定位至图片底部

嘿，我来帮你揪出这个问题的根源！你给.card-img-overlay设置了display: flex和flex-direction: column，但给最后一个div加align-self: end却没让它贴到图片底部，大概率是踩了flex轴方向的坑，或者父容器的高度没设置对，具体来说有这几个常见原因：

• 搞混了flex轴的方向（最可能的原因）
  当flex-direction: column时，flex的主轴是垂直方向，交叉轴是水平方向。align-self属性是控制元素在交叉轴上的对齐——也就是水平方向的左/中/右对齐，根本管不了垂直方向的上下位置！
  要让元素在垂直方向贴到底部，你有两个简单的办法：

  1. 给最后一个div加margin-top: auto：这个auto margin会自动填满上方的剩余空间，把元素“挤”到底部
  2. 给父容器.card-img-overlay设置justify-content: flex-end：如果这个overlay里只有这一个需要贴底的元素，直接让主轴上的元素全部靠下对齐就行

  举个代码示例：

  .card-img-overlay {
    display: flex;
    flex-direction: column;
    /* 如果需要同时水平居中，可以加align-items: center; */
  }
  
  .card-img-overlay .bottom-text {
    margin-top: auto;
    /* 要是需要水平靠右，再加align-self: end; */
  }
  

• 父容器没有占满图片的高度
  .card-img-overlay作为图片的覆盖层，必须确保它的高度和图片完全一致，否则就算设置了正确的flex属性，也没有足够的空间让元素贴底。你需要给它设置绝对定位并占满父容器：

  .card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }
  

  别忘了给它的父容器（比如.card）设置position: relative，这样绝对定位才能相对于父容器生效。

• 默认样式干扰
  检查一下最后一个div或者.card-img-overlay有没有默认的margin、padding，或者父容器有没有设置overflow: hidden之类的属性，这些都可能影响元素的定位。用浏览器开发者工具（F12）查看元素的盒模型，就能快速排查这类问题。

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