其他分享
首页 > 其他分享> > flex 布局

flex 布局

作者:互联网

flex 布局中  有几个重要的属性

align-items  纵轴方向 每个元素的align-self CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

align-content 多行 元素位置 

该属性对单行弹性盒子模型无效。(即:带有 flex-wrap: nowrap)。 

 justify-content 属性定义了浏览器之间,如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

justify-items  在flex 布局中是无效的

以下是聊天布局

ysilly-ishizaka-xi98d - CodeSandboxsilly-ishizaka-xi98d by zhuzhi14https://codesandbox.io/s/silly-ishizaka-xi98d?file=/index.html 预览地址 

<!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>

标签:flex,items,align,布局,chat,line,士大夫
来源: https://blog.csdn.net/weixin_39578505/article/details/122344291