• 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
    来源：简书
    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

     

     

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>Documenttitle>
    8.   <style>
    9.     body{background: #f8f8f8;}
    10.     .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;}
    11.     .m-we-tools-list-item-avatar{ width: 50px;height: 50px;border-radius: 5px;}
    12.     .m-we-tools-list-item-avatar .el-image__inner{width: 50px;height: 50px;}
    13.     .m-we-tools-list-item-info{position: relative; margin: 0 12px 0 8px;flex: 1;display: flex;flex-direction: column;height: 100%;overflow: hidden;}
    14.     .m-we-tools-list-item-info-row1{display: flex;padding: 16px 0 0 0;align-items: center;height: 22px;}
    15.     .m-we-tools-list-item-info-row2{ display: flex;margin: 2px 0 0 0; align-items: center;}
    16.     .m-we-tools-list-item-left{flex: 1;display: flex;overflow: hidden;}
    17.     .m-we-tools-list-username{font-size: 14px;font-weight: 500;color: #1C2023;max-width: 50%;}
    18.     .m-we-tools-list-enter-type-wrap{margin: 0 0 0 4px;flex: 1;display: flex;align-items: center;}
    19.     .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;}
    20.     .m-we-tools-list-time{font-weight: 400;font-size: 12px;color: #6B6C6C;min-width: 75px;text-align: right;}
    21.     .m-we-tools-list-inviter{font-size: 12px; color: #6B6C6C;flex:1;}
    22.     .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;}
    23.     .m-ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    24.  
    25.   style>
    26. head>
    27. <body>
    28.   <div class="m-we-tools-list-item">
    29.     <img src="https://static.xxx.com/images/xxx.png" class="m-we-tools-list-item-avatar">
    30.     <div class="m-we-tools-list-item-info">
    31.       <div class="m-we-tools-list-item-info-row1">
    32.         <div class="m-we-tools-list-item-left">
    33.           <div class="m-we-tools-list-username m-ellipsis">
    34.             徐同保
    35.           div>
    36.           <div class="m-we-tools-list-enter-type-wrap m-ellipsis">
    37.             <div class="m-we-tools-list-enter-type m-ellipsis">
    38.               前端开发
    39.             div>
    40.           div>
    41.         div>
    42.  
    43.         <div class="m-we-tools-list-time m-ellipsis">
    44.           2022-12-03
    45.         div>
    46.       div>
    47.       <div class="m-we-tools-list-item-info-row2">
    48.         <div class="m-we-tools-list-inviter m-ellipsis">
    49.           邀请人：xu
    50.         div>
    51.         <div
    52.           class="m-we-tools-list-detail-btn"
    53.           v-if="item.type === 2"
    54.           @click="handleIsDetailVisible(item)"
    55.         >
    56.           详情
    57.         div>
    58.       div>
    59.     div>
    60.   div>
    61.   <div class="m-we-tools-list-item">
    62.     <img src="https://static.douyuxingchen.com/images/CF79E1EF420C018E78C3624EB41F3A76.png" class="m-we-tools-list-item-avatar">
    63.     <div class="m-we-tools-list-item-info">
    64.       <div class="m-we-tools-list-item-info-row1">
    65.         <div class="m-we-tools-list-item-left">
    66.           <div class="m-we-tools-list-username m-ellipsis">
    67.             徐同保111111111111111111111111
    68.           div>
    69.           <div class="m-we-tools-list-enter-type-wrap m-ellipsis">
    70.             <div class="m-we-tools-list-enter-type m-ellipsis">
    71.               前端开发
    72.             div>
    73.           div>
    74.         div>
    75.  
    76.         <div class="m-we-tools-list-time m-ellipsis">
    77.           2022-12-03
    78.         div>
    79.       div>
    80.       <div class="m-we-tools-list-item-info-row2">
    81.         <div class="m-we-tools-list-inviter m-ellipsis">
    82.           邀请人：xu
    83.         div>
    84.         <div
    85.           class="m-we-tools-list-detail-btn"
    86.           v-if="item.type === 2"
    87.           @click="handleIsDetailVisible(item)"
    88.         >
    89.           详情
    90.         div>
    91.       div>
    92.     div>
    93.   div>
    94.  
    95.   <div class="m-we-tools-list-item">
    96.     <img src="https://static.douyuxingchen.com/images/CF79E1EF420C018E78C3624EB41F3A76.png" class="m-we-tools-list-item-avatar">
    97.     <div class="m-we-tools-list-item-info">
    98.       <div class="m-we-tools-list-item-info-row1">
    99.         <div class="m-we-tools-list-item-left">
    100.           <div class="m-we-tools-list-username m-ellipsis">
    101.             徐同保111111111111111111111111111111
    102.           div>
    103.           <div class="m-we-tools-list-enter-type-wrap m-ellipsis">
    104.             <div class="m-we-tools-list-enter-type m-ellipsis">
    105.               前端开发11111111111111111111111111111111
    106.             div>
    107.           div>
    108.         div>
    109.  
    110.         <div class="m-we-tools-list-time m-ellipsis">
    111.           2022-12-03
    112.         div>
    113.       div>
    114.       <div class="m-we-tools-list-item-info-row2">
    115.         <div class="m-we-tools-list-inviter m-ellipsis">
    116.           邀请人：xu
    117.         div>
    118.         <div
    119.           class="m-we-tools-list-detail-btn"
    120.           v-if="item.type === 2"
    121.           @click="handleIsDetailVisible(item)"
    122.         >
    123.           详情
    124.         div>
    125.       div>
    126.     div>
    127.   div>
    128. body>
    129. html>

  • 相关阅读:
    GaussDB技术解读——GaussDB架构介绍（五）
    人工神经网络的基本模型,人工神经网络数学模型
    华为云HECS云服务器docker环境下安装mysql
    李沐多模态串讲笔记
    都说测试行业饱和了，为什么我们公司给初级测试开到了12K?
    力扣-415.字符串相加
    卷积神经网络CNN（Convolutional Neural Network）
    十一、数据结构——多路查找树
    鸿蒙原生App开发之：套用混合app开发思路
    用HTML+CSS做一个简单好看的汽车网页
  • 原文地址：https://blog.csdn.net/xutongbao/article/details/128164672