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

Posted 2023-03-05

【中文标题】对齐儿童弹性容器底部不起作用[重复]

【英文标题】：Align children flex container bottom not working [duplicate]

【发布时间】：2020-09-17 16:02:32

【问题描述】：

我在 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>

【问题讨论】：

你已经接近了，你没有尝试 margin-top:auto

【参考方案1】：

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

【讨论】：

谢谢！我也用过，但是在错误的课程中，现在可以了！

不客气！这很正常，通过练习你会发现这些小细节。 :)