Flex align-items 不适用于 flex-wrap？ [复制]

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，在末尾对齐项目，并且由于 wrap 和 100% 中的 wrap 和 width，h1 创建了一个新行。完美。

不是这样的：

等等，这里发生了什么？ <p> 与底部对齐，但 <h1> - 不是吗？但是父容器有align-items: flex-end;，这是什么魔法？

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

h1 { align-self: flex-end; }

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

h1 { align-self: end; }

好吧，现在怎么办？

请问，谁能向我解释一下这里到底发生了什么以及为什么 Flex 如此愚蠢不直观？我可以在 20 秒内使用旧的 position: relative 甚至 tables（我知道，我知道...）来完成此操作。是只有我一个人还是 Flexbox 感觉像是一个非常强大的工具，但对于大约 95% 的最简单的情况来说，它是一种过度杀伤和令人头疼的工具？

注意：我不想添加任何额外的 DIVS 包装器或容器。我觉得将 h1 和 p 包装在一个 div 中然后对齐会相当容易，但我不会在 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

编辑 1：

我忘了在关于 flex-wrap 的原始答案中提到，当它的启用和行项目被包装并创建多行 flexbox 时。在这种情况下，当您对齐内容时（我没有提到项目，因为您想考虑所有元素而不仅仅是单行上的元素），您需要使用align-content: flex-end。

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

当您使用align-items: flex-end 时，flexbox 会根据元素所在的行对齐项目。

当您使用align-items: flex-end 时，元素按照它们的线对齐。

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

当你使用align-content: flex-end 时，线条会移动到底部。

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

以下是适合您的工作示例：

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>

https://jsfiddle.net/h9ykz0ue/

---

您的代码实际上没有任何问题。我建议您在 flex 容器中使用 align-items: flex-end; 而不是 align-items: end;。

您在这里面临的问题是保证金。 <h1> 和 <p> 都有自己的边距。

由于 flex 布局，这些元素是并排呈现的（但在视觉上它们是垂直堆叠的，感谢flex-wrap）。 margin collapsing 也没有出现在你的布局中，因为它在 flex 布局中不受支持，它只出现在块布局中。

我建议你不要使用flex-wrap: wrap，而是这样使用flex-direction: column 和justify-content: flex-end：

div {
  .
  .
  flex-direction: column;
  justify-content: flex-end;
  .
  .
}

这是我所说的快速演示：

body {
  margin: 0;
  padding: 0;
}

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

h1 {
  width: 100%;
}

h1, p {
  color: #fff;
}

p {
  margin: 0;
}

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

这里我还去掉了<p>的边距，这样<h1>就会更接近它。如果不需要，您可以删除样式。