I want to display Latest chat person 1st position(active) with firebase but firebase have not date field. so i am tring date number of milliseconds with flexbox column-reverse that will start from top but not from bottom. I have tried with position but not working. Would you please give me a good way to do this.

.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>

I want to display Latest chat person 1st position(active) with firebase but firebase have not date field. so i am tring date number of milliseconds with flexbox column-reverse that will start from top but not from bottom. I have tried with position but not working. Would you please give me a good way to do this.

.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>

• javascript
• html
• css
• firebase
• flexbox

• Possible duplicate of stackoverflow./questions/54223686/… and stackoverflow./questions/54221692/need-divs-to-be-push-down/… – doğukan Commented Feb 27, 2019 at 18:26

2 Answers 2

Change justify-content property to flex-end - see demo below:

.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>

I was in the same situation, how I hacked it is by having the flex property - order saved in firebase for every post. Flex has an order property which you can set. It makes the ordering of elements very easy.

Just set order property and value fetched from firebase to your every post.

Here is the link of the page, I have used it on: https://hackinbits./blog

Here is the link to the MDN docs: Set https://developer.mozilla/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property