对齐儿童弹性容器底部不起作用[重复]

Question

我在 flex 容器中有 3 个元素（1 个图像，2 个文本）。我无法将它们对准底线。我试过margin-bottom: 0margin-bottom: auto，但它不起作用。

.distance {
  display: flex;
  justify-content: space-between;
}

.flex {
  display: flex;
}

.icon {
  width: auto;
  max-height: 100px;
  margin-right: 8px;
}

.text1 {
  font-size: 15px;
}

.text2 {
  font-size: 12px;
  margin-bottom: 0px;
}

<div class="distance">
  <div class="flex">
    <img src="https://r00t4bl3.com/uploads/pp-840x830-pad-1000x1000-f8f8f8-c3edd4cbfc0d7bc9d7b02b27c6f6bac5.jpg" class="icon">
    <div class="text1">
      Golang
    </div>
    <div class="text2">
      Made by Google
    </div>
  </div>
</div>

Answer 1

对于弹性显示中的垂直对齐，使用属性align-items。在您的情况下，在 flex 类中添加 align-items: flex-end。 css-tricks 是 flexbox 的一个很好的参考。