flex布局列表页（一行内容比较多，长度比较长）

news2024/11/6 3:43:23

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

3.1 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

3.2 flex-wrap属性

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

3.4 justify-content属性

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。

作者：眼睛里的郁金香
链接：https://www.jianshu.com/p/e57425a771ff
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

<!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>
  <style>
    body{background: #f8f8f8;}
    .m-we-tools-list-item{display: flex; align-items: center; height: 73px;margin: 0 0 15px 0; padding: 0 0 0 12px; border-radius: 5px;background-color: #fff;}
    .m-we-tools-list-item-avatar{ width: 50px;height: 50px;border-radius: 5px;}
    .m-we-tools-list-item-avatar .el-image__inner{width: 50px;height: 50px;}
    .m-we-tools-list-item-info{position: relative; margin: 0 12px 0 8px;flex: 1;display: flex;flex-direction: column;height: 100%;overflow: hidden;}
    .m-we-tools-list-item-info-row1{display: flex;padding: 16px 0 0 0;align-items: center;height: 22px;}
    .m-we-tools-list-item-info-row2{ display: flex;margin: 2px 0 0 0; align-items: center;}
    .m-we-tools-list-item-left{flex: 1;display: flex;overflow: hidden;}
    .m-we-tools-list-username{font-size: 14px;font-weight: 500;color: #1C2023;max-width: 50%;}
    .m-we-tools-list-enter-type-wrap{margin: 0 0 0 4px;flex: 1;display: flex;align-items: center;}
    .m-we-tools-list-enter-type{display: inline-block; padding: 0 9px; height: 22px;line-height: 22px; background: rgba(230,230,230,0.37);border-radius: 11px;color: #6B6C6C;font-size: 12px;}
    .m-we-tools-list-time{font-weight: 400;font-size: 12px;color: #6B6C6C;min-width: 75px;text-align: right;}
    .m-we-tools-list-inviter{font-size: 12px; color: #6B6C6C;flex:1;}
    .m-we-tools-list-detail-btn{width: 65px;height: 20px;border-radius: 10px;color: #FF4500;border: 1px solid #FF4500;line-height: 20px;text-align: center;font-size: 12px;cursor: pointer;}
    .m-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

  </style>
</head>
<body>
  <div class="m-we-tools-list-item">
    <img src="https://static.xxx.com/images/xxx.png" class="m-we-tools-list-item-avatar">
    <div class="m-we-tools-list-item-info">
      <div class="m-we-tools-list-item-info-row1">
        <div class="m-we-tools-list-item-left">
          <div class="m-we-tools-list-username m-ellipsis">
            徐同保
          </div>
          <div class="m-we-tools-list-enter-type-wrap m-ellipsis">
            <div class="m-we-tools-list-enter-type m-ellipsis">
              前端开发
            </div>
          </div>
        </div>

        <div class="m-we-tools-list-time m-ellipsis">
          2022-12-03
        </div>
      </div>
      <div class="m-we-tools-list-item-info-row2">
        <div class="m-we-tools-list-inviter m-ellipsis">
          邀请人：xu
        </div>
        <div
          class="m-we-tools-list-detail-btn"
          v-if="item.type === 2"
          @click="handleIsDetailVisible(item)"
        >
          详情
        </div>
      </div>
    </div>
  </div>
  <div class="m-we-tools-list-item">
    <img src="https://static.douyuxingchen.com/images/CF79E1EF420C018E78C3624EB41F3A76.png" class="m-we-tools-list-item-avatar">
    <div class="m-we-tools-list-item-info">
      <div class="m-we-tools-list-item-info-row1">
        <div class="m-we-tools-list-item-left">
          <div class="m-we-tools-list-username m-ellipsis">
            徐同保111111111111111111111111
          </div>
          <div class="m-we-tools-list-enter-type-wrap m-ellipsis">
            <div class="m-we-tools-list-enter-type m-ellipsis">
              前端开发
            </div>
          </div>
        </div>

        <div class="m-we-tools-list-time m-ellipsis">
          2022-12-03
        </div>
      </div>
      <div class="m-we-tools-list-item-info-row2">
        <div class="m-we-tools-list-inviter m-ellipsis">
          邀请人：xu
        </div>
        <div
          class="m-we-tools-list-detail-btn"
          v-if="item.type === 2"
          @click="handleIsDetailVisible(item)"
        >
          详情
        </div>
      </div>
    </div>
  </div>

  <div class="m-we-tools-list-item">
    <img src="https://static.douyuxingchen.com/images/CF79E1EF420C018E78C3624EB41F3A76.png" class="m-we-tools-list-item-avatar">
    <div class="m-we-tools-list-item-info">
      <div class="m-we-tools-list-item-info-row1">
        <div class="m-we-tools-list-item-left">
          <div class="m-we-tools-list-username m-ellipsis">
            徐同保111111111111111111111111111111
          </div>
          <div class="m-we-tools-list-enter-type-wrap m-ellipsis">
            <div class="m-we-tools-list-enter-type m-ellipsis">
              前端开发11111111111111111111111111111111
            </div>
          </div>
        </div>

        <div class="m-we-tools-list-time m-ellipsis">
          2022-12-03
        </div>
      </div>
      <div class="m-we-tools-list-item-info-row2">
        <div class="m-we-tools-list-inviter m-ellipsis">
          邀请人：xu
        </div>
        <div
          class="m-we-tools-list-detail-btn"
          v-if="item.type === 2"
          @click="handleIsDetailVisible(item)"
        >
          详情
        </div>
      </div>
    </div>
  </div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/58899.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！