如何在Flexbox布局的div中实现文本底部对齐？

你当前给父容器.flexTest设置的align-items: flex-end，作用是把子div元素整体对齐到flex容器的底部，但子div内部的文本还是默认沿顶部排列。要让文本对齐到子div自身的底部，只需要给子div也启用Flex布局，并设置内部对齐方式：

修改.flexTest div的CSS样式，添加以下两个属性：

• display: flex：让子div成为Flex容器
• align-items: flex-end：将子容器内的文本（子元素）垂直对齐到底部

修改后的完整CSS代码 #

body,
html {
  background-color: #666666;
  box-sizing: border-box;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
  color: #ffffff;
}

.flexTest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  border: 1px solid #D2D2D2;
  background-color: #000000;
}

.flexTest div {
  background-color: #EB710F;
  padding: 5px;
  margin: 5px;
  height: 50px;
  border: 1px solid #D2D2D2;
  cursor: pointer;
  /* 添加以下两行实现文本底部对齐 */
  display: flex;
  align-items: flex-end;
}

对应的HTML代码（无需修改） #

<div id="div1" class="flexTest">
  <div>
    Tatactic - Nicolas 1
  </div>
  <div>
    Tatactic - Nicolas 2
  </div>
  <div>
    Tatactic - Nicolas 3
  </div>
  <div>
    Tatactic - Nicolas 4
  </div>
  <div>
    Tatactic - Nicolas 5
  </div>
  <div>
    Tatactic - Nicolas 6
  </div>
  <div>
    Tatactic - Nicolas 7
  </div>
  <div>
    Tatactic - Nicolas 8
  </div>
</div>

这样修改后，每个橙色子div内的文本就会对齐到自身的底部了。

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