javascript-将flex项堆叠到flex容器的底部

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

是否有一种不使用javascript / jquery的纯CSS3方法?谢谢

这是fiddle.我要对齐/堆叠到底部的3个div是.searchForm,.tweetForm和.myMsg.我目前正在将.fudgeBox放在顶部,以将其向下推到底部.

解决方法:

添加

.searchForm { margin-top: auto; }

您可以报废spacer div和所有JS.

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

> auto margins demo
> justify-content demo

在此处了解有关调整内容自动边距的更多信息:Methods for Aligning Flex Items

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: <span id=&quot...
jQuery 添加水印 <script src="../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...