flex 布局中 有几个重要的属性
align-items 纵轴方向 每个元素的align-self CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。
align-content 多行 元素位置
该属性对单行弹性盒子模型无效。（即：带有 flex-wrap: nowrap）。
justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。
justify-items 在flex 布局中是无效的
以下是聊天布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- #region
聊天框布局
每一个聊天框的宽度为200px
设置为flex布局
默认为垂直排列 左对齐
只有自己的才是右对齐
两者皆可
flex-direction: row-reverse;
justify-content: flex-end;
-->
<style type="text/css">
* {
margin: 0;
top: 0;
box-sizing: border-box;
}
#container {
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}
.chat-list {
width: 400px;
height: 400px;
background-color: rgba(235, 236, 231, 0.842);
position: relative;
overflow-y: scroll;
scroll-behavior: smooth;
display:flex;
flex-direction: column;
/* align-items:center;
justify-content:center; */
}
.chat-list .line {
display: flex;
align-items: flex-start;
justify-items: flex-start;
}
.content {
max-width: 70%;
background-color: rgb(13, 241, 24);
padding: 2px;
font-size: 16px;
margin-top:2px;
border-radius: 10px;
line-height: 32px;
padding-left: 8px;
padding-right: 8px;
word-break: break-all;
}
.chat-list .right {
flex-direction: row-reverse;
/* justify-content: flex-end;*/
}
</style>
</head>
<body id="container">
<div class="chat-list">
<div class="line">
<div class="content">
聊天内2323222容,232322222222222333333333332222222222的士大夫士大夫222222222222222222233士大夫胜多负少33333333333333的士大夫士大夫撒旦
聊天内2323222容,232322222222222333333333332222222222的士大夫士大夫222222222222222222233士大夫胜多负少33333333333333的士大夫士大夫撒旦
聊天内2323222容,232322222222222333333333332222222222的士大夫士大夫222222222222222222233士大夫胜多负少33333333333333的士大夫士大夫撒旦
</div>
</div>
<div class="line">
<div class="content">聊天内容</div>
</div>
<div class="line right">
<div class="content">士大夫胜多负少聊天内容222222222222222</div>
</div>
<div class="line right">
<div class="content">士大夫胜多负少聊天内容222222222222222</div>
</div>
<div class="line right">
<div class="content">士大夫胜多负少聊天内容222222222222222</div>
</div>
</div>
</body>
<script type="text/javascript">
const line = document.querySelectorAll(".line");
console.log(line[line.length - 1].offsetTop);
const chat = document.querySelector(".chat-list");
// scoll();
let line_length = line.length;
// setInterval(function () {
// let l = document.createElement("div");
// l.className = "line";
// l.innerHTML = "聊天内容" + line_length;
// chat.appendChild(l);
// console.log(line[line.length - 1].offsetTop);
// scoll();
// line_length += 1;
// }, 1000);
function scoll() {
const line_new = document.querySelectorAll(".line");
chat.scrollTop = line_new[line_new.length - 1].offsetTop;
}
</script>
</html>