将 Flex 项目堆叠到 Flex 容器底部

Question

我正在尝试将3个项目与一个display:flex div底部对齐/堆叠。我所能做的唯一方法是在顶部添加第4个div，并使用javascript/jquery动态地调整其高度，以将这些3个项目推到底部。

是否有一种纯CSS3的方法可以做到这一点，而不必诉诸于javascript/jquery？谢谢

这里是fiddle链接。我想要对齐/堆叠到底部的3个div是.searchForm、.tweetForm和.myMsg。目前，我将一个.fudgeBox放在顶部，将它们推到底部。

- rockhammer

Answer 1

将此添加：

.searchForm { margin-top: auto; }

你可以删除间隔div和所有JS。

另一种选择是在flex容器（.sideRight）上使用justify-content: flex-end。

• auto margins演示
• justify-content演示

了解更多关于justify-content和auto边距的信息，请访问对齐Flex项的方法。

- Michael Benjamin

---

谢谢，迈克尔。这很优雅。就像魔法一样！唉，我的jsfiddle并没有完全代表我真正的代码，它还使用了bootstrap 4。我的实际.sideRight也有类col-md-4，这似乎阻止.sideRight采用height:100%，并将.sideRight的高度限制为.sideRght中元素的总和。这似乎阻止了.searchForm {margin-top:auto;}的工作。因此，我仍然需要使用jquery来动态调整高度，只是我改为调整.searchForm的margin-top而不是使用虚拟div。 - rockhammer

是的，Bootstrap和Flexbox有时候不太兼容。你可以通过在CSS中应用!important来覆盖Bootstrap，但这种方法效果并不一定。祝你好运 :-) - Michael Benjamin

我找到了为什么 .searchForm { margin-top: auto; } 没有生效。Bootstrap粘性页脚模板使用的是 min-height:100% 而不是 height:100%。根据定义来看，这两者应该产生相同的效果，但实际上并不是这样。通过将 min-height 替换为 height，{ margin-top: auto; } 就能正常工作了。 - rockhammer

Answer 2

在你的.sideRight css中使用justify-content而不是align-items。当你使用flex-direction: column时，流向变为垂直，因此justify-...和align-...的使用基本上会交换。

- Tyler

---

谢谢Tyler的快速回复。 - rockhammer