javascript - 如何让可滚动 flexbox 容器中的新元素出现在最新的最下面(包括 Fiddle)

标签 javascript css vue.js flexbox

我正在尝试使用 flexbox 实现一个基本的即时消息界面,其中交互字段构成静态页脚,新消息出现在内容字段的底部并将现有消息向上推。

然而,我很难找到一个优雅的解决方案来应对让新元素出现在最下方的挑战。

我在这里做了一个 fiddle 来说明我的问题:https://jsfiddle.net/jensmtg/1fob3mat/

我最接近解决这个问题的方法是实现一个系统,在新消息出现时给它们一个负的和递减的 css order 值,但我希望有更好的方法这个?

最佳答案

使用unshift代替push

this.message_stack.unshift('This is message #' + this.message_count);

fiddle :https://jsfiddle.net/1fob3mat/1/

关于javascript - 如何让可滚动 flexbox 容器中的新元素出现在最新的最下面(包括 Fiddle),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45059429/

相关文章:

node.js - 如何在 Node-Express/Vue Web 应用程序中管理 OAuth?

javascript - 如何验证 Firebase 中是否存在数据

javascript - 使用 Select2 仅加载一次远程数据

javascript - 从显示 :none to display:block? 向下滑动动画

css - 如何从弹出窗口中删除背景控件?

html - CSS 自定义 div 高度

html - 页眉/页脚出现在错误的位置

vue.js - 在 Vue 项目之间共享 Assets 和组件

javascript - 如何使用 VueI18n 进行基于组件实例的国际化?

javascript - Chrome 控制台已经声明变量抛出 let 的 undefined reference 错误