Question

在我们的Web应用程序中，我正在尝试垂直对齐flexboxes中的内容。我想要的是将内容锚定到父div的底部（左）角，以便内容向上而不是向下。

更具体地说，我想要实现的是：我有一列 n 元素，使用flexbox均匀分隔。这些元素都有一个在悬停时激活的工具栏。此工具栏应该锚定到元素的底部。问题是，没有给出元素的高度，并且按预期溢出其容器。但它严重地使工具栏的位置复杂化。我不想拉伸元素，它们的最大高度应该是其内容的高度（这可以排除我迄今为止尝试过的所有position: absolute黑客和解决方案。）

我设想最简单的解决方案是将元素锚定到弯曲元素的左下角，并让它向上生长。这样，将工具栏锚定到底部是微不足道的，并且更好地支持变量高度和元素数量。我无法弄清楚如何做到这一点，或者即使它有可能。

Code example

这里我希望内容文本位于元素的左下角，而元素框要向上增长（和溢出）而不是向下。移除overflow: hidden以查看向下生长/溢出的含义。

Answer 1

您需要justify-content:flex-end并叠加2 flex个级别才能在子级内触发justify-content。

DEMO ，p中有body作为容器。

基础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 */
}

要查看顶部溢出的内容，您必须违背自然流程，所以，

您需要在absolute家长的position relative内设置内容：

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

垂直对齐flexbox内的内容

1 个答案: