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

Posted 2023-03-05

【中文标题】Flex align-items 不适用于 flex-wrap？ [复制]

【英文标题】：Flex align-items does not work with flex-wrap? [duplicate]

【发布时间】：2021-03-26 01:46:53

【问题描述】：

我有时觉得 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 来添加不必要的标记。

【参考方案1】：

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

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

【参考方案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>就会更接近它。如果不需要，您可以删除样式。

【讨论】：

谢谢你，但我认为你在这里可能错了，删除边距没有帮助，所以问题必须出在其他地方：jsfiddle.net/pno45L3c

您能否详细说明您的要求。你在这里期待什么？

这里检查一下：jsfiddle.net/z6hopvqw，它不仅仅是边距，它也是您需要更改的 flex-direction。保证金在这里是可选的！

请阅读完整答案，我已经详细解释了

您的回答非常好，我会接受它，尽管我尝试学习新东西，但我仍然不明白为什么我需要对没有列的数据使用“列”布局全部。 Flexbox 真的很奇怪。