目录
前言
你好，我是喵喵侠。随着最近两年AI的爆火，市面上出现了各种各样的大模型，而用户和大模型最常见的交互方式就是聊天对话形式，而这个对话框的交互逻辑从IM软件诞生那一刻就已经出现了。对于前端开发来说，巧妙的利用CSS的属性，可以快速的布局一个聊天窗口。下面来一起看看吧！
需求描述
某次我接到一个开发任务，那就是要开发一个AI对话聊天窗口。由于好久没开发类似这样的需求，显得有些生疏，正好研究完成后，可以用这篇文章记录一下。
在这个任务中，需要实现一个基本的聊天界面，用户可以发送消息，并接收来自AI模型的回复。每次用户的提问和AI的回答都将组成一个对话单元，展示在页面上。
由上图可以看到，这种自己的消息在右边，对方的回复在左边的布局还蛮特别的，因为它不是固定朝向某一个方向对齐，而是先是右边后是左边这样的。知道了这个布局要求，接着就是想办法实现了。
实现思路
我的实现核心思路是用flex布局，flex布局是设置flex-direction:column实现垂直排列，然后分别设置子元素的align-self属性。，自己的消息是align-self:flex-end是靠右，AI回复的消息是align-self:flex-start是靠左。这样布局就很快实现了。
我的完整代码示例如下：
<template> <div class="chat-container"> <div class="chat-item" v-for="(message, index) in messages" :key="index"> <!-- 用户发送的消息 --> <div class="chat-ask">{{ message.ask }}</div> <!-- AI 回复的消息 --> <div class="chat-answer">{{ message.answer }}</div> </div> </div> </template> <script> export default { data() { return { // 用于存储每组对话的数组 messages: [ { ask: "你好，喵喵AI！", answer: "你好！有什么我能帮助你的吗？" }, { ask: "今天天气怎么样？", answer: "今天的天气非常好，阳光明媚。" }, ], }; }, }; </script> <style scoped> .chat-container { padding: 20px; background-color: #f0f4f8; } .chat-item { display: flex; flex-direction: column; margin-bottom: 16px; } .chat-ask { /* 右对齐，模拟用户的消息 */ align-self: flex-end; background: #419fff; color: #fff; border-radius: 12px 2px 12px 12px; padding: 8px; max-width: 80%; /* 确保内容不超过屏幕宽度 */ word-break: break-all; /* 长单词自动换行 */ margin-bottom: 10px; } .chat-answer { /* 左对齐，模拟AI的回复 */ align-self: flex-start; background: #daedff; color: #333; border-radius: 12px; padding: 8px; max-width: 80%; /* 确保内容不超过屏幕宽度 */ word-break: break-all; /* 长单词自动换行 */ } </style>
我上面写的每个对话气泡，都设置了max-width，这是为了防止消息宽度超出屏幕，同时也适配了消息长度比较小的情况。
如果要开发的不是AI聊天一问一答的形式，而是通过WebSocket的实时聊天室这样的，那么这个数组对下的结构就不太使用了。你可以给别人的消息标记一个类名是right-msg，给自己的消息标记为left-msg，这样你设置了align-self后布局还是一样的效果。
上面的案例只是实现了对话框对话部分的布局，具体的发送消息框和按钮，以及发送消息后容器滚动到指定位置等细节，可以自行完善。
总结
通过合理使用Flexbox布局，可以很轻松的实现一个AI聊天对话框的页面布局。该布局不仅直观简洁，而且易于扩展和维护。无论是开发简单的聊天应用，还是集成复杂的AI模型，这样的布局都能提供良好的用户体验。希望能对你有所帮助，如果你有别的好用的方法，可以在评论区留言。
