Question

我想显示具有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>

Answer 1

我处在相同的情况下，如何通过为每个帖子将 flex属性-订单保存在Firebase中来破解它。 Flex具有可以设置的订单属性。它使元素的排序非常容易。

只需设置从firebase提取到每个帖子的订单属性和值即可。

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

上使用了它。

以下是MDN文档的链接：设置https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property

Answer 2

将CreativeWork属性更改为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;
}

flexbox list列反转并从顶部开始

2 个答案: