我正在尝试将3个项目对齐/堆叠到display:flex
div的底部。我可以管理它的唯一方法是在顶部添加第4个div。使用javascript / jquery动态调整其高度,基本上将这3个项目推到底部。
有没有纯粹的CSS3方式来做到这一点,而不诉诸javascript / jquery?感谢
这是fiddle。我希望对齐/堆叠到底部的3个div是.searchForm
,.tweetForm
和.myMsg
。我现在正试图将.fudgeBox
放在顶部以将它们推到底部。
答案 0 :(得分:2)
添加:
.searchForm { margin-top: auto; }
你可以废弃spacer div和所有JS。
Flex容器(justify-content: flex-end
)上的另一种选择是.sideRight
。
在此处详细了解justify-content
和auto
页边距:Methods for Aligning Flex Items
答案 1 :(得分:1)
在.sideRight css中使用justify-content
代替align-items
。当您使用flex-direction: column
时,流向会变为垂直方向,因此justify-...
和align-...
的使用基本上会切换。