接上面两篇继续，我来实现下对话框聊天界面，效果如下图：
全部代码：
代码语言：javascript复制<template>
<div class="chatAppBody">
<div class="chatTitle">标题</div>
<div class="chatBox">
<div class="chatRow">
<el-avatar class="chatAvatar" :size="30" src="https://goflychat.oss-cn-hangzhou.aliyuncs.com/static/upload/avator/2022June/32a988a3c2f8700119fa1f5da1b6a4bd.png"></el-avatar>
<div class="chatMsgContent">
<div class="chatUsername">唯一客服系统</div>
<div class="chatContent">有什么可以帮您?</div>
</div>
</div>
<div class="chatRow chatRowMe">
<div class="chatContent">你好，这个客服系统多少钱？</div>
</div>
</div>
<div class="chatBottom">输入框区域</div>
</div>
</template>
<script>
export default {
name: 'ChatApp',
data() {
return {
}
},
methods: {
},
mounted: function () {
}
}
</script>
<style lang="scss">
.chatAppBody{
display: flex;
flex-direction: column;
height: 100vh;
background-color: #f1f5f8;
}
.chatTitle{
background: #fff;
}
.chatBox{
flex: 1;
padding: 0 5px;
}
.chatBottom{
background: #fff;
}
.chatRow{
display: flex;
align-items: flex-end;
margin: 5px 0px;
}
.chatAvatar{
margin-right: 5px;
flex-shrink: 0;
}
.chatUsername {
font-size: 12px;
white-space: nowrap;
color: #999;
margin-bottom: 2px;
}
.chatContent{
border-radius: 10px 10px 10px 0px;
padding: 10px;
background-color: rgb(255,255,255);
box-shadow: 0 5px 30px rgb(50 50 93 / 8%), 0 1px 3px rgb(0 0 0 / 5%);
font-size: 14px;
word-break: break-all;
line-height: 21px;
}
.chatRowMe{
justify-content: flex-end;
}
.chatRowMe .chatContent{
border-radius: 10px 10px 0px 10px;
}
</style>主要是使用了flex布局来实现的，这里面没用用float浮动，全部都是flex
.chatRow 中的 align-items: flex-end; 让其子元素在底部对齐，实现头像垂直方向靠下对齐
.chatRowMe 中的 justify-content: flex-end; 让其子元素在右边对齐。实现我的聊天水平方向靠右
界面宽度缩小时，头像不缩小：
"flex-shrink" 是 CSS Flexbox 布局中的一个属性。它定义了 flex 项目相对于其他项目的缩小比例。默认值为 1。当容器空间不足时，所有项目将缩小，比例由 flex-shrink 值决定。 如果 flex-shrink 为 0 则元素不能缩小，相当于关闭了缩小的功能。
例如上面代码中, .chatAvatar 元素设置了 flex-shrink 为 0,意味着它不能缩小。
总的来说,设置 flex-shrink 为 0 可以让一个元素在空间不足时保持原大小，不会缩小。
