flexbox list column-reverse 并从顶部开始答案

【问题标题】：flexbox list column-reverse and start from topflexbox list column-reverse 并从顶部开始
【发布时间】：2019-07-21 13:39:12
【问题描述】：

我想用 firebase 显示最新的聊天人 1st position(active)，但 firebase 没有日期字段。所以我用 flexbox column-reverse 从顶部开始而不是从底部开始跟踪日期毫秒数。我已经尝试过职位但没有工作。请你给我一个好方法来做到这一点。

.container {
    display: flex;
    flex-direction: column-reverse;
    /*flex-flow: flex-start;*/
    justify-content: flex-end;
    align-items: flex-start;
    height: 700px;
    width: 100%;
    background: blue;
    position: absolute;
    overflow:auto;
}
.box {
position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
    width: 50px;
    height: 50px;
    background-color: red;
    top:0px;
}
.active{
    order:1;
}

<ul class="container">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box active">3</li>
    <li class="box">4</li>
    <li class="box">5</li>
    <li class="box">6</li>
</ul>

【问题讨论】：

stackoverflow.com/questions/54223686/… 和 stackoverflow.com/questions/54221692/need-divs-to-be-push-down/… 的可能重复

标签： javascript html css firebase flexbox

【解决方案1】：

我遇到了同样的情况，我是如何破解它的，方法是将 flex 属性 - order 保存在每个帖子的 firebase 中。 Flex 有一个可以设置的 order 属性。它使元素的排序变得非常容易。

只需将从 firebase 获取的 order 属性和值设置为您的每个帖子。

这是页面的链接，我用过：https://hackinbits.com/blog

这里是 MDN 文档的链接：Set https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property

【讨论】：

.active{ order:1; } 也是需要的

【解决方案2】：

将 justify-content 属性更改为 flex-end - 请参见下面的演示：

.container {
    display: flex;
    flex-direction: column-reverse;
    /*flex-flow: flex-start;*/
    justify-content: flex-end; /* CHANGED */
    align-items: flex-start;
    height: 700px;
    width: 100%;
    background: blue;
    position: absolute;
    overflow:auto;
}
.box {
position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
    width: 50px;
    height: 50px;
    background-color: red;
    top:0px;
}

<ul class="container">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
    <li class="box">5</li>
    <li class="box">6</li>
</ul>

【讨论】：