Перечень столбцов списка flexbox и начало сверху

Question

Я хочу отобразить Последний человек в чате 1st position(active) с firebase, но у firebase нет поля даты.поэтому я использую число даты в миллисекундах с обратным столбцом flexbox, которое будет начинаться сверху, а не снизу.Я пытался с позиции, но не работает.Не могли бы вы дать мне хороший способ сделать это.

.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: Set https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property

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