css - 垂直对齐 flexbox 中的内容

Question

在我们的 web 应用程序中，我试图垂直对齐 flexboxes 中的内容。我想要的是将内容锚定到父 div 的底部(左) Angular ，以便内容向上而不是向下增长。

Example image .

更具体地说，我想要实现的是:我有一列 n 元素，使用 flexbox 均匀分布。这些元素都有一个在悬停时激活的工具栏。这个工具栏应该锚定在元素的底部。问题是，元素的高度没有给出，并按预期溢出了它的容器。但它使工具栏的放置变得非常复杂。我不想拉伸(stretch)元素，它们的最大高度应该是其内容的高度(这排除了我迄今为止尝试过的所有 position: absolute 技巧和解决方案)。

我设想最简单的解决方案是将元素锚定到 flex 元素的左下角，并让它向上生长。这样将工具栏锚定到底部是微不足道的，并且更好地支持可变高度和元素数量。我不知道该怎么做，或者根本不知道该怎么做。

Code example

在这里，我希望内容文本位于元素的左下角，并且元素框向上增长(并溢出)而不是向下。删除 overflow: hidden 以了解我所说的向下增长/溢出是什么意思。

Answer 1

你需要 justify-content:flex-end 和 imbricate 2 个 flex 级别来触发 childs 中的 justify-content。

DEMO 以 body 中的 2 个 p 作为容器。

---

基础 CSS

body {/* used as a box for demo, size it */
  width:600px;
  height:250px;
  margin:auto;
  display:flex;
}
p {
  border:solid;
  display:flex;
  flex-direction:column;/* vertical! */
  padding:5px;
}
p+p {
  justify-content: flex-end;/* drop down content */
}

---

要看到顶部溢出的内容，您必须逆自然流动，所以，

您需要在 relative parent 中将内容设置为 absolute position :

DEMO

---

第二段的 HTML 同上 + 文本包裹在 span 中。

body {
  width:600px;
  height:150px;
  margin:auto;
  display:flex;
}
p {
  border:solid;
  padding:5px;
  margin:1em;
  width:300px;
  position:relative;
}
p + p span  {
 display:block;
  position:absolute;
  bottom:0;
  width:100%
}