灵活对齐项不工作与灵活包装？[重复]

Question

我有时觉得Flex太复杂了。

演示：https://jsfiddle.net/304xhguw/

我试图创建一个容器，它的末尾有多行文本：

使用Flex应该很容易，对吧？

div {
  display: flex;
  align-items: flex-end;
  padding: 20px;
  height: 300px;
  background: #222;
  flex-wrap: wrap;
}

h1 {
  width: 100%;
}

h1, p {
  color: #fff;
}

完成后，容器使用flex，在末尾对齐项，并且h1由于100%的包装和宽度而创建新行。完美。

不是真的：

等等，刚才发生了什么事<代码>

不用担心，有一些惊人的特性应该可以工作，让我们试试：

h1{align self:flex end；}

没什么变化，嗯，好吧，那么也许：

h1{align self:end；}

好吧，现在到底怎么回事？

请问，有谁能解释一下这里到底发生了什么，为什么Flex如此愚蠢地不直观？我可以使用好的位置：relative甚至表来完成这项工作（我知道，我知道…）20秒后。是我一个人，还是Flexbox感觉像是一个强大的工具，对于大约95%的最简单的案例来说，它是一个过度的、令人头痛的工具？

注意：我不想添加任何额外的DIVS包装或容器。我想在一个div中包装H1和P，然后对齐它是相当容易的，但是在2021中我不使用Flex来添加不必要的标记。




Answer 1

使用flex的替代解决方案，使用flex方向作为列

div {
display: flex;
flex-direction:column;
justify-content: flex-end;
padding: 20px;
height: 300px;
background: #222;
flex-wrap: wrap;
}

Answer 2

我忘了在最初的回答中提到，当它的启用和行项被包装起来并创建多行flexbox时。在这种情况下，当您对齐内容时（我没有提到项目，因为您希望考虑所有元素，而不仅仅是单行上的元素），您需要使用amied-Content： flex-end。

这将在flexbox的末尾打包flex布局中出现的所有多行，并且您的项目将在底部对齐。

当您使用对项目进行对齐：flex-end时，flexbox是根据元素所在的行对齐项目。

使用“对齐项目：柔性端”时，元素将按照其行对齐。

Heading
--------- // line 1
Paragraph
--------- // line 2

当您使用amie-Content： flex-end时，行会在底部移动。

Heading
Paragraph
--------- // multi lines are packed at the end of the flexbox

以下是您的工作示例：

css prettyprint-override">body { margin: 0; padding: 0; }

div {
  display: flex;
  align-content: flex-end;
  padding: 20px;
  height: 300px;
  background: #222;
  flex-wrap: wrap;
}

h1 {
  width: 100%;
}

h1, p {
  color: #fff;
}

<div>
  <h1>Header something something something header more of header and more and more</h1>
  <p>Just some content at the end of the div not sure what more to write</p>
</div>