flex布局列表页（一行内容比较多，长度比较长）
一、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>