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

时间:2016-05-11 01:58:23

标签: javascript jquery css css3 flexbox

我正在尝试将3个项目对齐/堆叠到display:flex div的底部。我可以管理它的唯一方法是在顶部添加第4个div。使用javascript / jquery动态调整其高度,基本上将这3个项目推到底部。

有没有纯粹的CSS3方式来做到这一点,而不诉诸javascript / jquery?感谢

这是fiddle。我希望对齐/堆叠到底部的3个div是.searchForm.tweetForm.myMsg。我现在正试图将.fudgeBox放在顶部以将它们推到底部。

2 个答案:

答案 0 :(得分:2)

添加:

.searchForm { margin-top: auto; }

你可以废弃spacer div和所有JS。

Flex容器(justify-content: flex-end)上的另一种选择是.sideRight

在此处详细了解justify-contentauto页边距:Methods for Aligning Flex Items

答案 1 :(得分:1)

在.sideRight css中使用justify-content代替align-items。当您使用flex-direction: column时,流向会变为垂直方向,因此justify-...align-...的使用基本上会切换。