首页 > 其他分享> 文章详细

flex 布局

2022-01-06 15:33:00 阅读：243 来源： 互联网

标签：flex items align 布局 chat line 士大夫

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

flex 布局