Как выровнять div к основанию?

Question

Я пытаюсь создать веб-страницу чата, используя Python Flask в качестве бэкэнда. Я хочу выровнять сообщения, которые были получены и отправлены недавно, чтобы быть выровненными внизу, и когда приходят новые, сообщения должны двигаться вверх, а новые должны быть размещены в этом месте. Как это сделать? Я читал похожие вопросы, но не мог понять, как реализовать это для моих нужд.

Моя структура страницы чата выглядит следующим образом

Извините за плохой код! Я новичок во всей этой идее. Там может быть много ошибок. Извините за это

Answer 1

Допустим, у вас есть базовая c структура разметки, такая как

<main id="msgs">
   <div>Message #0</div>
   <div>Message #1</div>
   <div>Message #2</div>
   <div>Message #3</div>
   <div>Message #4</div>
   <!-- new messages are appended here -->
</main>

Используя Flexbox, вы можете расположить их в обратном порядке, чтобы каждое новое сообщение отображалось в верхней части страницы

main {
   display: flex;
   flex-flow: column-reverse nowrap;
}

Затем с помощью Javascript, после добавления нового сообщения вам необходимо прокрутить основной элемент с помощью scrollTo(0, 0); Прокрутка может быть даже улучшена с помощью CSS с помощью scroll-behavior: smooth;

Здесь под фрагментом который имитирует новое сообщение каждые 5s:

---

var messageArea = document.getElementById('msgs');
messageArea.scrollTo(0, 0);

setInterval(() => {
  /* create a new message element */
  var msgEl = document.createElement('div');
  /* create a string with the message */
  var msgText = 'Message #' + messageArea.children.length;
  /* set the textContent of the element with the message */
  msgEl.textContent = msgText;
  /* append the new message in the container of the messages */
  messageArea.appendChild(msgEl);
   
  /* finally scroll the message area to (0, 0) coords. */
  messageArea.scrollTo(0, 0);
}, 5000)

main {
   height: 100vh;
   display: flex;
   overflow: auto;
   padding: 1em .5em;
   flex-flow: column-reverse nowrap;
   scroll-behavior: smooth;
}

div {
   border: 1px #ccc solid;
   border-radius: 10px;
   padding: 1em;
   margin-top: 1.5em;
   width:60%;
   align-self: flex-start;
}

div:nth-child(2n) {
   align-self: flex-end;
}

<main id="msgs">
   <div>Message #0</div>
   <div>Message #1</div>
   <div>Message #2</div>
   <div>Message #3</div>
   <div>Message #4</div>
</main>

Answer 2

Лучше всего просто добавить новое сообщение в раздел сообщений и использовать JavaScript / jQuery для прокрутки до конца этого раздела.

jQuery:

$('.messages').scrollTop($('.messages').height())