右对齐居中、列对齐的柔性容器中的单个项目

Question

我搜索并找到了关于在行对齐的flex上对项进行右对齐的讨论，但没有在列对齐的flex中对项进行正确对齐的讨论。

我有几行文字。每条线水平居中，容器垂直放置。然而，有一行是在页脚，我想正确地证明它

我已经尝试了我能想到的每一种组合来右对齐页脚(align-self的各种值，将页脚更改为使用inline-block，更改页脚中的justify-content等(，所有的结果都是左对齐。

设置了两个section元素中的CSS；我无法改变它们。我可以在footer做任何我想做的事(在合理的范围内(。

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

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

如果将页脚设为width:100%，则为ORtext-align

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>