最近在做公眾號項目，用的flex布局，發(fā)現(xiàn)真的很好用，可以少寫好多css樣式代碼，在這里記錄下最近項目里常用到的一些布局，后續(xù)也會一直更新。

附上flex布局參考鏈接：
阮一峰flex語法篇
阮一峰flex實例篇
flex布局

項目環(huán)境：vue3 + vant (css樣式使用的less預處理器)

1. 平均分布并列一排效果圖

圖片一排并列

// 后面重復的直接復制就可以了，包含樣式
<div class="home-nav">
   <div class="home-nav-menu van-hairline--right">
     <img src="@/assets/demo/groupinspection.png" class="home-nav-img"/>
     <p class="home-nav-content">企業(yè)團檢</p>
   </div>
</div>

// css樣式為less預處理
// &-menu&為簡寫，class名前面是一樣的，不用重復寫
.home-nav{
            width: 345px;
            height: 110px;
            min-height: 110px;
            background: #FFFFFF;
            border: 1px solid #E7E7E7;
            box-shadow: 1px 6px 6px 1px rgba(0, 70, 67, 0.15);
            border-radius: 10px;
            margin: 0 auto;
            display: flex;   //排列成一行
            padding: 13px 0;
            margin-top: 21px;
            &-menu{
                width: 33%; // 根據(jù)排列圖片的多少來平均分配比例
                display: flex;
                flex-direction: column; //縱向排列
                align-items: center; //垂直
                justify-content: space-between; // 水平
            }
            &-img{
                margin-top: 9px;
                width: 38px;
                height: 38px;
            }
            &-content{
                font-size: 14px;
                font-weight: 400;
                color: #343434;
                line-height: 36px;
            }
        }

2. 平均分布并列一排效果圖

注：和第1種類似，應用場景多行多個圖片展示，這里包含一個樣式用偽類實現(xiàn)的

圖片多行多列排列

<div class="center-more">
    <div class="center-more-service">
        <span class="center-more-service-title">更多服務</span>
    </div>
    <!--功能模塊 begin-->
    <div class="center-model">
       <div class="center-model-order">
           <img src="@/assets/demo/order.png" class="center-model-order-img"/>
           <p class="center-model-order-content">體檢訂單</p>
       </div>
       <div class="center-model-order">
           <img src="@/assets/demo/report.png" class="center-model-order-img"/>
           <p class="center-model-order-content">報告查詢</p>
       </div>
       <div class="center-model-order">
           <img src="@/assets/demo/tousu.png" class="center-model-order-img"/>
           <p class="center-model-order-content">投訴建議</p>
       </div>
     </div>
   <!--功能模塊 end-->
</div>

.center-more{
            width: 344px;
            height: 320px;
            background: #FFFFFF;
            border: 1px solid #E5E5E5;
            box-shadow: 1px 6px 6px 1px rgba(0, 70, 67, 0.15);
            border-radius: 15px;
            margin: 10px auto;
            flex-shrink: 0;
            &-service{
                display: flex;
                //左右兩端對齊，即左右兩側項目都緊貼容器，且項目之間間距相等
                //寫了這個屬性后，就不需要再寫padding、margin了，屬性會根據(jù)div來自動平鋪
                justify-content: space-between; 
                align-items: center;  //居中
                padding: 28px 22px;
                &-title{
                    display: flex;
                    align-items: center;
                    color: #333333;
                    font-size: 15px;
                    &::before  //偽類
                    {
                        content: "";
                        display: block;
                        width: 4px;
                        height: 17px;
                        background: #02B0A7;
                        margin-right: 15px;
                        border-radius: 15px;
                    }
                }
            }
        }

.center-model{
            display: flex;
            //關鍵在于這個屬性，是否換行，根據(jù)圖片平均分布的百分比來
            flex-wrap: wrap; 
            &-order{
                width: 33%; //根據(jù)這里設置的百分比
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                &-img{
                    width: 28px;
                    height: 32px;
                }
                &-content{
                    font-size: 12px;
                    font-weight: 400;
                    color: #333333;
                    line-height: 44px;
                }
            }
        }

3. 左右分布效果圖

左右分布

<div class="home-mall">
            // 引入左邊圖片
            <img src="@/assets/demo/mall.png" class="home-mall-img" />
            <!--中醫(yī)理療 begin-->
            <div class="home-mall-type" >
                <div class="home-mall-type-med">
                    <img src="@/assets/demo/chmedicineimg.png" />
                    <div class="home-mall-type-med-content">
                        <p class="home-mall-type-med-title">中醫(yī)理療</p>
                        <p class="home-mall-type-med-detail">詳情></p>
                    </div>
                </div>
               <!--中醫(yī)理療 end-->

                <!--口腔護理 begin-->
                // 樣式一樣時，只是背景圖不同，樣式可以簡寫，也可以重新單獨寫
                <div class="home-mall-type-med oral">
                    <img src="@/assets/demo/oralcareimg.png" />
                    <div class="home-mall-type-med-content">
                        <p class="home-mall-type-med-title">口腔護理</p>
                        <p class="home-mall-type-med-detail">詳情></p>
                    </div>
                </div>
                <!--口腔護理 end-->
            </div>
</div>

.home-mall{
            height: 179px;
            min-height: 179px;
            padding: 0 15px;
            display: flex;
            margin-top: 20px;
            justify-content: space-between; // 圖片兩端對齊
            &-img{
                width: 167px;
                height: 179px;
            }
            &-type{
                width: 168px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                &-med{
                    width: 100%;
                    height: 84px;
                    //右邊上面第一個圖片，以背景圖引入進來
                    background: url("../../assets/demo/chmedicine.png"); 
                    //把背景圖片放大到適合元素容器的尺寸，圖片比例不變
                    background-size: cover; 
                    padding: 21px 15px;
                    display: flex;
                    //讓左右兩張圖片頂部對齊
                    align-items: flex-start;
                    // 樣式簡寫方式，只把不同的地同提取出來
                    &.oral{
                      background: url("../../assets/demo/oralcare.png");
                      background-size: cover;
                    }
                     //img可以直接這樣寫，是因為img是包含在&-med這個class下的，可以識別到
                    img
                    {
                        width: 30px;
                        margin-right: 10px;
                    }
                    &-title{
                        font-size: 18px;
                        font-weight: 400;
                        color: #181818;
                    }
                    &-detail{
                        font-size: 13px;
                        font-weight: 400;
                        color: #02B0A8;
                    }
                }
            }
        }

4. 同個容器里，填充剩余部分效果圖

填充div剩余部分

<div class="invoice-type-all">
    <van-button class="invoice-type-all-total">全選</van-button>
    <van-button  class="invoice-type-all-next" color="#02B0A8" block>下一步</van-button>
</div>

.invoice-type-all{
                display: flex;
                flex: auto;
                margin-top: 170px;
                padding: 20px;
                &-total{
                    flex: auto;
                    margin-right: 20px;
                }
                &-next{
                    flex: auto;
                }
            }

5. 一張圖片分割為兩部分，并且上部分是固定的，下部分是隨著滾動而隱藏起來

對比圖

// 圖片上部分結構
 <div class="pay-background-title">
      <van-icon name="arrow-left" size="20"/>
      <p>訂單詳情</p>
 </div>

// 圖片下部分結構
<div class="order-wrap">
    <div class="pay-background-wrap">
        <div class="pay-background-wrap-content">
           <p>已取消</p>
           <img src="@/assets/images/paymoney.png"/>
        </div>
    </div>
</div>

// 圖片上部分樣式
.pay-background-title{
        display: flex;
        color: #ffffff;
        background: url("../../assets/images/backgroung.png") no-repeat;
        background-position: top;  // 圖片的上部分
        background-size: 100%; // 按容器比例撐滿，圖片會有點變形
        height: 50px; // 圖片切割為兩部分后，上部分圖片的高度，加起來等于完整圖片的高度
        align-items: center;
        flex-shrink: 0;
        P{
            margin-left: 120px;
            font-size: 18px;
            font-weight: 400;
         }
        .van-icon{
            margin-left: 10px;
        }
    }

// 圖片下部分樣式
// 設置這個樣式是以圖片的下部分及后面內容為主體，只是下面部分滾動，上面的固定不動
.order-wrap{
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: auto;
        flex: auto;
    }

.pay-background-wrap
    {
        height: 122px; // 圖片切割為兩部分后，下部分圖片的高度，加起來等于完整圖片的高度
        background: url("../../assets/images/backgroung.png") no-repeat;
        background-position: bottom;  // 圖片的下部分
        background-size: 100%;
        &-content{
            display: flex;
            justify-content: space-between;
            padding: 20px;
            p{
                font-size: 15px;
                font-weight: bold;
                color: #FFFFFF;
                margin-left: 20px;
                display: flex;
                align-items: center;
            }
            img{
                width: 77px;
                height: 67px;
            }
        }
    }

6. 頁面底部固定，剩下部分滾動

效果圖

<template>
  <div class="org-select">
    <div class="org-select-pay">
       <van-button class="org-select-pay-btn" color="#FF8D1F" block>可在確認支付時修改分期</van-button>
       <div class="org-select-pay-wrap van-hairline--bottom">
          <div class="org-select-pay-wrap-contact">
              <img src="@/assets/images/contact.png"/>
              <p>客服</p>
           </div>
          <van-button color="#02B0A8" class="bottom" plain round size="normal">立即預約</van-button>
        </div>
      </div>
   </div>
</template>

.org-select{
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: auto;
        /*這里設置padding-bottom距離底部距離的原因是：因為當前頁面的高度是固定667px的，
          當超出這個高度時，底部的內容就被擋住了，所以需要設置下，再配合overflow使用就可以了*/
        /*這里沒有使用padding-bottom樣式是因為 蘋果手機兼容問題，所以改用了下面那種樣式*/
        /*padding-bottom: 96px;*/
        height: calc(100% - 96px);  // 頁面總的高度 - 固定底部div的高度

    &-pay{
            position: fixed;  /*flex絕對定位*/
            bottom: 0;  // 距離底部0距離
            width: 100%;
            height: 96px;  // 需要給個高度，不然頁面底部內容會被擋住
            z-index: 999;  // 浮在頁上最上層
            background: #ffffff;
            &-btn{
                height: 30px; // 這是修改分期樣式
            }
            &-wrap{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px;
                &-contact{
                    img{
                        width: 25px;
                        height: 26px;
                    }
                    p{
                        font-size: 12px;
                        font-weight: 400;
                        color: #343434;
                    }
                }
            }
        }
}

7. 在圖片里寫入文字

圖片里寫入文字

<div class="blue">
   <img src="@/assets/images/green.png" class="blue-img"/>
   <p class="blue-other">其它產(chǎn)品</p
</div>

.blue{
        display: flex;
        justify-content: center;
        margin-top: 30px;
        position: relative;
        flex-shrink: 0;
        &-img{
            width: 345px;
            height: 51px;
        }
        &-title{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 51px;
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFF;
            // 第一種實現(xiàn)方法，與注釋的第二種方法都可以實現(xiàn)，除了注釋代碼外，其它代碼一樣
            display: flex;
            align-items: center;
            justify-content: center;
          // 第二種實現(xiàn)方法，其它都一樣，除了注釋的這二行
          // text-align: center;
         // line-height: 51px;
        }
        &-other{
            position: absolute;
            top: 27%;
            left: 40%;
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFF;
        }
    }

8. 標簽固定在div右上角

標簽固定在div右上角

<div class="characteristic-service">
   <ul class="characteristic-service-warp">
       <li class="characteristic-service-warp-item">
          <div class="characteristic-service-warp-item-title">疾病篩查</div>
          <div class="characteristic-service-warp-item-sub">胃幽/結腸癌等</div>
          <div class="hot">HOT</div>
          <img src="@/assets/images/shuidi.png"/>
        </li>
        <li class="characteristic-service-warp-item">
           <div class="characteristic-service-warp-item-title">中醫(yī)理療</div>
           <div class="characteristic-service-warp-item-sub">中醫(yī)理療在線預約</div>
           <div class="hot">NEW</div>
           <img src="@/assets/images/liliao.png"/>
        </li>
   </ul>
</div>

.characteristic-service
    {
        padding: 0 15px;
        margin-top: 24px;
        &-warp
        {
            margin-top: 6px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            &-item
            {
                width: 170px;
                height: 78px;
                margin-top: 5px;
                padding-left: 10px;
                padding-top: 15px;
                background: #E2F6FF;
                border-radius: 10px;
                position: relative;
                overflow: hidden;  // 右上角hot標簽超出部分隱藏
                img
                {
                    position: absolute;
                    width: 45px;
                    right: 13px;
                    bottom: 4px;
                }
                &:nth-of-type(2)  // 選擇器匹配同類型中的第n個同級兄弟元素
                {
                    background: #FCF6E8;
                    img
                    {
                        position: absolute;
                        width: 47px;
                        right: 12px;
                        bottom: 4px;
                    }
                    .hot
                    {
                        background: #FFD061;  // 每個標簽的顏色不同
                    }
                }
                &:nth-of-type(3)
                {
                    background: #EFF8F5;
                    img
                    {
                        position: absolute;
                        width: 40px;
                        right: 17px;
                        bottom: 7px;
                    }
                    .hot
                    {
                        background:#35D1B2;
                    }
                }
                &:nth-of-type(4)
                {
                    background: #F2F4FA;
                    img
                    {
                        position: absolute;
                        width: 44px;
                        right: 3px;
                        bottom: 6px;
                    }
                    .hot
                    {
                        background:#755DF7;
                    }
                }
                &-title
                {
                    color: #2B2C2D;
                    font-size: 16px;
                }
                &-sub
                {
                    color: #999999;
                    font-size: 12px;
                    margin-top: 2px;
                }
                .hot
                {
                    width: 40px;
                    text-align: center;
                    height: 16px;
                    line-height: 16px;
                    background: #00AEFF;
                    color: #ffffff;
                    font-size: 12px;
                    font-weight: bold;
                    position: absolute;
                    top: 3px;
                    right: -6px;
                    transform: rotateZ(45deg);  // 右上角hot標簽旋轉45度
                }

            }
        }
    }

9. 多行文字兩端對齊

多行文字兩端對齊

<div class="notice">
   <div class="notice-title">預約須知</div>
   <p>1、提前預約: 為了能成功提交訂單，請盡早預訂</p>
   <p>2、體檢憑證：體檢當天憑借預約成功短信，現(xiàn)場出示身份證即可體檢，無需繳納其他費用（現(xiàn)場加項或快遞報告除外）。</p>
   <p>3、訂單退改：支持未體檢訂單隨時退款，退款不扣除額外費用；如需修改體檢時間請至少在原體檢時間提前一天修改。</p>
</div>


// css
.notice
    {
        padding: 16px;
        font-size: 14px;
        line-height: 25px;
        flex: auto;
        overflow: auto;
        .notice-title
        {
            margin-bottom: 5px;
        }
       // 當在一個層級下面時，可以直接寫p寫樣式，像img也可以
        p  
       {
            text-align: justify; // 直接這行代碼搞定
        }
    }

10. 超出高度顯示滾動條

超出高度顯示滾動條

<template>
  <div class="container"></div>
</template>
 
// css
.container {
        display: flex;
        flex-direction: column;
        overflow: auto;
        width: 100%;
        height: 100%;
}

11. tab欄上面不動，下面內容滾動

tab欄上面不動，下面內容滾動

<view class="wrap">
  <view class=" tabs hairline-top">
    <!-- tab欄 begin-->
    <van-tabs active="{{ active }}" bind:change="onChange" color="#4DC9CD" title-active-color="#4DC9CD">
      <van-tab title="互聯(lián)網(wǎng)">內容 1</van-tab>
      <van-tab title="門診">內容 2</van-tab>
    </van-tabs>
    <!-- tab欄 end-->

    <!-- 內容 begin-->
    <scroll-view scroll-y class="record"> // 不要忘記  scroll-view   scroll-y
      <view class="record-content">
        <view class="record-name">
          <text class="doc-name">醫(yī)生名稱</text>
          <text class="doc-a">王醫(yī)生</text>
        </view>
        <view class="record-consulta">
          <text class="doc-name">科室名稱</text>
          <text class="doc-a">心血管內科</text>
        </view>
        <view class="record-consulta">
          <text class="doc-name">就診時間</text>
          <text class="doc-a">2021-3-20 14:00-15:00</text>
        </view>
        <view class="record-result hairline-bottom">
          <text class="doc-name">診斷結果</text>
          <text class="doc-a">呼吸道結核</text>
        </view>
        <view class="button">
          <button class="btn" plain="true">歷史報告</button>
          <button class="btn" plain="true">歷史處方</button>
          <button class="btn" plain="true">歷史病歷</button>
        </view>
      </view>
    </scroll-view>
    <!-- 內容 end-->
  </view>
</view>

.wrap{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.van-tab__pane--active { /*這里是把組件tab欄顯示內容 1那里的高度去掉*/
  height: 0 !important;
}
.tabs{
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.record{
  flex: 1;
  background: #F2F2F2;
  overflow: auto;
}