React+Tailwind聊天消息底部布局问题：如何让消息从容器底部显示？

使用Tailwind CSS开发聊天界面，想要让消息列表从容器底部开始显示，但给<ul>添加flex flex-col后没达到预期效果。当前代码及问题如下：

<form onSubmit={handleSubmit} className="bg-white-900 p-10 border">       
  <ul className="h-80 overflow-y-auto flex flex-col">
    {messages.map((message, index) => (
      <li
        key={index}
        className={"flex flex-row w-full" + message.from === userA ? "justify-start" : "justify-end"}
      >
        <div className={`my-2 p-2 table text-sm rounded-md text-black ${
          message.from === userA? "bg-slate-300 ml-auto" : "bg-slate-100"
        }`}
        >
          {message.body}
        </div>
      </li>
    ))}
  </ul>

  <input
    name="message"
    type="text"
    placeholder="Escribe tu mensaje..."
    onChange={(e) => setMessage(e.target.value)}
    className="border-2 border-zinc-500 p-2 w-full text-black"
    value={message}          
  />
</form>

当前消息从容器顶部开始排列，需要改成从底部开始显示。

1. 调整<ul>的Flex布局属性 #

给<ul>添加justify-end类，让Flex容器内的子元素（消息项）向底部对齐：

<ul className="h-80 overflow-y-auto flex flex-col justify-end">

justify-end是Tailwind的Flex对齐类，作用是让主轴（这里是垂直方向）上的子元素靠容器末端排列，刚好实现消息贴底的效果。

2. 修复<li>的类名拼接错误 #

你当前的<li>类名拼接逻辑有语法问题，字符串和三元表达式的连接方式错误，导致justify-start/justify-end无法正确应用。改成模板字符串写法：

<li
  key={index}
  className={`flex flex-row w-full ${message.from === userA ? "justify-start" : "justify-end"}`}
>

3. 可选：新消息自动滚动到底部 #

如果希望发送新消息后自动滚动到最新消息，可以添加一个锚点元素并配合useEffect实现：

import { useEffect, useRef } from 'react';

// 在组件内定义Ref
const messagesEndRef = useRef(null);

// 监听消息列表变化，滚动到底部
useEffect(() => {
  messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);

// 在消息列表最后添加锚点
<ul className="h-80 overflow-y-auto flex flex-col justify-end">
  {messages.map((message, index) => (
    // 原消息项代码
  ))}
  <div ref={messagesEndRef} />
</ul>

内容的提问来源于stack exchange，提问作者jhon estrada