如何在html和css中创建类似聊天的UI

Question

我需要创建一个包含聊天消息a、B、C、D 的聊天容器框

1. A
2. B
3. C
4. D

最新消息应始终添加到底部。

我使用

显示：flex；弯曲方向：柱反向。

它将从底部显示，但最新的消息添加到顶部，就像这个

1. D
2. C
3. B
4. A

如何实现这样的

1. A
2. B
3. C
4. D

Answer 1

要将最新消息添加到底部，请尝试使用display:flex;flex-direction:column;

以下是查看其他flex属性的参考链接：[1] ：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

使用unshift将最新消息附加到列表conversation.unshift(latestMessage);的开头，然后使用display : flex; flex-direction : column-reverse进行格式化