0

Есть список сообщений, который нужно отобразить снизу вверх. Использовать flex-box не могу. Так как при display: flex перестает отображаться вертикальная прокрутка. Каким иным образом, я могу отобразить элементы в нужном мне порядке ?

<div class"container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
</div>

То как элементы отображаются, я хочу, отображать их в обратном порядке. flex-direction: column-revers позволяет это сделать, но я не могу использовать flexbox в своем случае. Вот и ижу альтернативу. (помимо того, чтобы использовать .reverse() на массиве моих объектов.

2
  • код ваш покажите Commented 3 окт. 2019 в 10:15
  • Отредактитовал пост. Commented 3 окт. 2019 в 10:22

3 ответа 3

5

извращение)

.container {
  transform: rotate(180deg);
}

.item {
  transform: rotate(180deg);
}
<div class="container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
</div>

2
  • 1
    а, по-моему, прикольно :) плюс Вам Commented 3 окт. 2019 в 10:34
  • Клевый вариант :) Commented 3 окт. 2019 в 10:56
1

Спасибо, всем кто откликнулся, классные варианты. Но пришел к выводу, что в моем случае применить .reverse() к массиву с объектами самый простой вариант.

0

Если есть возможность, то можно использовать Grid (хотя и выходит топорно):

.container {
  display: grid;
}

.item:first-child {
  order: 5;
}

.item:nth-child(2) {
  order: 4;
}

.item:nth-child(3) {
  order: 3;
}

.item:nth-child(4) {
  order: 2;
}

.item:last-child {
  order: 1;
}

Рабочий пример: https://jsfiddle.net/b0pLt895/

1
  • Спасибо, но не вариаент :( Прейдется дописывать функционал, и индекс обьекта ставить как order, проще уже с reverse() ^) Я искал вариант похожий на флекс дайрекшн. Commented 3 окт. 2019 в 10:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.