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

Share Improve this question Follow edited Feb 27, 2019 at 19:03 Shapon Pal asked Feb 27, 2019 at 18:24 Shapon PalShapon Pal 1,14633 gold badges1717 silver badges2727 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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