在居中、列对齐的 flex 容器中右对齐单个项目

Question

我搜索并发现了关于在行对齐的 flex 上右对齐项目的讨论，但不是列对齐的。

我有几行文字。每条线水平居中，容器垂直放置。但是，有一行在页脚中，我想将其右对齐。

我已经尝试了我能想到的所有组合来右对齐页脚（align-self 的各种值，将页脚更改为使用 inline-block，更改页脚中的 justify-content 等），以及所有内容导致它被左对齐。

设置了两个section元素中的CSS；我无法改变它们。我可以在footer 中为所欲为（在合理范围内）。

如何让页脚中的文本右对齐，即在窗口的右侧，即text-align: right 如果不在 flex 容器中会做什么？

<section>
  <p>Lorem ipsum</p>
  <p>Morbi at interdum odio</p>
  <p>Maecenas mi ex</p>
  <footer>
    <p>Nunc ultricies</p>
  </footer>
</section>

section{
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(70vh - 3em);
}

section > *{
  margin: 0;
}

footer {
  margin-top: 1em;
}

Answer 1

align-self:flex-end

section{
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(70vh - 3em);
}

section > *{
  margin: 0;
}

footer {
  margin-top: 1em;
  align-self:flex-end;
}

<section>
  <p>Lorem ipsum</p>
  <p>Morbi at interdum odio</p>
  <p>Maecenas mi ex</p>
  <footer>
    <p>Nunc ultricies</p>
  </footer>
</section>

或text-align，如果您制作页脚width:100%

section{
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(70vh - 3em);
}

section > *{
  margin: 0;
}

footer {
  margin-top: 1em;
  text-align:right;
  width:100%;
}

<section>
  <p>Lorem ipsum</p>
  <p>Morbi at interdum odio</p>
  <p>Maecenas mi ex</p>
  <footer>
    <p>Nunc ultricies</p>
  </footer>
</section>