Question

使用flexbox，如何将<p>与其父级的“结束”对齐？

根据文档，将align-content: flex-end添加到父元素应该就足够了。但是，这不适用于下面的示例。

示例：

这是一个包含p元素的简单div。

div {
  display: flex;
  flex-direction: column;
  align-content: flex-end; /* This should do the alignment, but doesn't. */
  background: yellow;
  padding: 50px;
  height: 300px;
  width: 400px;
}

<div>
  <p>Align me to the end.</p>
</div>

jsFiddle

一个hacky解决方案是向::before的孩子添加flex: 1，但我很好奇是否有更好的解决方案。

Answer 1

last属性仅在容器中有多行flex项时才有效。此属性旨在分配行之间的空间。

由于容器中只有一行，usort($merge,function ($a,$b) { return $a['created'] < $b['created']; });无效。

在单行容器中使用align-content。

align-content

align-items

revised fiddle

8.4. Packing Flex Lines: the align-content property

div { display: flex; flex-direction: column; align-items: flex-end; /* changed from align-content */ justify-content: flex-end; /* optional */ background: yellow; padding: 50px; width: 400px; height: 300px; }属性对齐Flex容器的行   当横轴有额外的空间时，flex容器，   类似于<div> <p> Align me in the bottom left corner. </p> </div>如何对齐单个项目   主轴。

请注意，此属性对单行Flex容器没有影响。

只有多线柔性容器在横轴上才有自由空间   对于要对齐的行，因为在单行Flex容器中   唯一的线条会自动拉伸以填充空间。

将弹性项目对齐到容器的末尾

1 个答案: