在图像上使用 CSS flex-end [关闭]答案

【问题标题】：Using CSS flex-end on images [closed]在图像上使用 CSS flex-end [关闭]
【发布时间】：2019-01-09 00:22:58
【问题描述】：

我有一个名为 section-a 的容器，其高度为 100vh，它有 3 个项目，我想将我的最后一个项目与视口高度的末端对齐。我尝试添加 align-self:flex-end 的属性，但我没有看到任何变化。谁能发现我哪里做错了？

.section-a {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.hero {
  height: 250px;
  width: 100%;
  align-self: flex-end;
}

.hero img {
  max-height: 100%;
}

<section id="section-a">
  <div class="nav"> ... </div< <div class="content"> ... </div>
  <div class="hero">
    <img src="hero.svg">
  </div>
</section>

【问题讨论】：

投票结束，因为这个问题是由无法再复制的问题或简单的印刷错误引起的。虽然类似的问题可能是这里的主题，但这个问题的解决方式不太可能帮助未来的读者。
@Paulie_D 解决了吗？如果是，答案是什么？
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?的可能重复

标签： html css flexbox

【解决方案1】：

首先，您在 HTML (id="section-a") 中添加了一个 id，但您在 CSS(.section-a) 中定位为 class；

其次，您可以选择margin-top: auto

.hero{
  // remove align-self;
  margin-top: auto;
}

你在flex-direction: column align-self: flex-end 会将内容向右移动，但是因为你有 width:100%; 它不会做任何事情，因为它会占据整个屏幕；

【讨论】：

【解决方案2】：

您不能使用 pure flex-box 在 main 轴上将一些项目放置在末尾和一些在开头。但是，您可以使用margin-top: auto 将其移至底部。正如here所指出的那样。

#section-a {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.hero{
    height:50px;
    width:100%;
    margin-top: auto;
    background-color: red;
}

.hero img{
    max-height:100%;
}

<section id="section-a">
    <div class="nav"> ... </div>
    <div class="content"> ... </div>
    <div class="hero">
        <img src="hero.svg">
    </div>
</section>

【讨论】：

You cannot position some items at the end and some at the start on the main axis. 这是错误的，请检查：stackoverflow.com/q/32551291/8620333
@TemaniAfif 没有justify-self，正如他们在您链接的帖子中所讨论的那样。他们正在讨论justify-self 的假设用途，所以我不知道您认为这可能会解决问题。无论如何，如果您有解决方案，我会很高兴听到它。
不要简单地阅读标题，阅读所有问题/答案......所有的 flexbox 功能都具有所有对齐的可能性
你是对的。我只阅读了前 2 个答案（它们本身就足够了；）。但是，纯 flex-box 是不可能的。我调整了答案，谢谢。