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

附上flex布局參考鏈接：
阮一峰flex語(yǔ)法篇
阮一峰flex實(shí)例篇
flex布局

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

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

圖片一排并列

// 后面重復(fù)的直接復(fù)制就可以了捐晶，包含樣式
<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è)團(tuán)檢</p>
   </div>
</div>

// css樣式為less預(yù)處理
// &-menu&為簡(jiǎn)寫(xiě)菲语，class名前面是一樣的，不用重復(fù)寫(xiě)
.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ù)排列圖片的多少來(lái)平均分配比例
                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種類(lèi)似惑灵，應(yīng)用場(chǎng)景多行多個(gè)圖片展示山上，這里包含一個(gè)樣式用偽類(lèi)實(shí)現(xiàn)的

圖片多行多列排列

<div class="center-more">
    <div class="center-more-service">
        <span class="center-more-service-title">更多服務(wù)</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">報(bào)告查詢(xún)</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;
                //左右兩端對(duì)齊，即左右兩側(cè)項(xiàng)目都緊貼容器英支，且項(xiàng)目之間間距相等
                //寫(xiě)了這個(gè)屬性后佩憾，就不需要再寫(xiě)padding、margin了干花，屬性會(huì)根據(jù)div來(lái)自動(dòng)平鋪
                justify-content: space-between; 
                align-items: center;  //居中
                padding: 28px 22px;
                &-title{
                    display: flex;
                    align-items: center;
                    color: #333333;
                    font-size: 15px;
                    &::before  //偽類(lèi)
                    {
                        content: "";
                        display: block;
                        width: 4px;
                        height: 17px;
                        background: #02B0A7;
                        margin-right: 15px;
                        border-radius: 15px;
                    }
                }
            }
        }

.center-model{
            display: flex;
            //關(guān)鍵在于這個(gè)屬性妄帘，是否換行，根據(jù)圖片平均分布的百分比來(lái)
            flex-wrap: wrap; 
            &-order{
                width: 33%; //根據(jù)這里設(shè)置的百分比
                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-->

                <!--口腔護(hù)理 begin-->
                // 樣式一樣時(shí)池凄，只是背景圖不同抡驼，樣式可以簡(jiǎn)寫(xiě)，也可以重新單獨(dú)寫(xiě)
                <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">口腔護(hù)理</p>
                        <p class="home-mall-type-med-detail">詳情></p>
                    </div>
                </div>
                <!--口腔護(hù)理 end-->
            </div>
</div>

.home-mall{
            height: 179px;
            min-height: 179px;
            padding: 0 15px;
            display: flex;
            margin-top: 20px;
            justify-content: space-between; // 圖片兩端對(duì)齊
            &-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;
                    //右邊上面第一個(gè)圖片修赞，以背景圖引入進(jìn)來(lái)
                    background: url("../../assets/demo/chmedicine.png"); 
                    //把背景圖片放大到適合元素容器的尺寸婶恼，圖片比例不變
                    background-size: cover; 
                    padding: 21px 15px;
                    display: flex;
                    //讓左右兩張圖片頂部對(duì)齊
                    align-items: flex-start;
                    // 樣式簡(jiǎn)寫(xiě)方式，只把不同的地同提取出來(lái)
                    &.oral{
                      background: url("../../assets/demo/oralcare.png");
                      background-size: cover;
                    }
                     //img可以直接這樣寫(xiě)柏副，是因?yàn)閕mg是包含在&-med這個(gè)class下的勾邦，可以識(shí)別到
                    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. 同個(gè)容器里，填充剩余部分效果圖

填充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. 一張圖片分割為兩部分割择，并且上部分是固定的眷篇，下部分是隨著滾動(dòng)而隱藏起來(lái)

對(duì)比圖

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

// 圖片下部分結(jié)構(gòu)
<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%; // 按容器比例撐滿(mǎn)，圖片會(huì)有點(diǎn)變形
        height: 50px; // 圖片切割為兩部分后荔泳，上部分圖片的高度蕉饼，加起來(lái)等于完整圖片的高度
        align-items: center;
        flex-shrink: 0;
        P{
            margin-left: 120px;
            font-size: 18px;
            font-weight: 400;
         }
        .van-icon{
            margin-left: 10px;
        }
    }

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

.pay-background-wrap
    {
        height: 122px; // 圖片切割為兩部分后昧港，下部分圖片的高度擎椰，加起來(lái)等于完整圖片的高度
        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. 頁(yè)面底部固定，剩下部分滾動(dòng)

效果圖

<template>
  <div class="org-select">
    <div class="org-select-pay">
       <van-button class="org-select-pay-btn" color="#FF8D1F" block>可在確認(rèn)支付時(shí)修改分期</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">立即預(yù)約</van-button>
        </div>
      </div>
   </div>
</template>

.org-select{
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: auto;
        /*這里設(shè)置padding-bottom距離底部距離的原因是：因?yàn)楫?dāng)前頁(yè)面的高度是固定667px的创肥，
          當(dāng)超出這個(gè)高度時(shí)达舒，底部的內(nèi)容就被擋住了，所以需要設(shè)置下叹侄，再配合overflow使用就可以了*/
        /*這里沒(méi)有使用padding-bottom樣式是因?yàn)?蘋(píng)果手機(jī)兼容問(wèn)題巩搏，所以改用了下面那種樣式*/
        /*padding-bottom: 96px;*/
        height: calc(100% - 96px);  // 頁(yè)面總的高度 - 固定底部div的高度

    &-pay{
            position: fixed;  /*flex絕對(duì)定位*/
            bottom: 0;  // 距離底部0距離
            width: 100%;
            height: 96px;  // 需要給個(gè)高度，不然頁(yè)面底部?jī)?nèi)容會(huì)被擋住
            z-index: 999;  // 浮在頁(yè)上最上層
            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. 在圖片里寫(xiě)入文字

圖片里寫(xiě)入文字

<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;
            // 第一種實(shí)現(xiàn)方法趾代，與注釋的第二種方法都可以實(shí)現(xiàn)贯底，除了注釋代碼外，其它代碼一樣
            display: flex;
            align-items: center;
            justify-content: center;
          // 第二種實(shí)現(xiàn)方法撒强，其它都一樣禽捆，除了注釋的這二行
          // text-align: center;
         // line-height: 51px;
        }
        &-other{
            position: absolute;
            top: 27%;
            left: 40%;
            font-size: 16px;
            font-weight: 400;
            color: #FFFFFF;
        }
    }

8. 標(biāo)簽固定在div右上角

標(biāo)簽固定在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">胃幽/結(jié)腸癌等</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ī)理療在線(xiàn)預(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標(biāo)簽超出部分隱藏
                img
                {
                    position: absolute;
                    width: 45px;
                    right: 13px;
                    bottom: 4px;
                }
                &:nth-of-type(2)  // 選擇器匹配同類(lèi)型中的第n個(gè)同級(jí)兄弟元素
                {
                    background: #FCF6E8;
                    img
                    {
                        position: absolute;
                        width: 47px;
                        right: 12px;
                        bottom: 4px;
                    }
                    .hot
                    {
                        background: #FFD061;  // 每個(gè)標(biāo)簽的顏色不同
                    }
                }
                &: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標(biāo)簽旋轉(zhuǎn)45度
                }

            }
        }
    }

9. 多行文字兩端對(duì)齊

多行文字兩端對(duì)齊

<div class="notice">
   <div class="notice-title">預(yù)約須知</div>
   <p>1、提前預(yù)約: 為了能成功提交訂單飘哨，請(qǐng)盡早預(yù)訂</p>
   <p>2睦擂、體檢憑證：體檢當(dāng)天憑借預(yù)約成功短信，現(xiàn)場(chǎng)出示身份證即可體檢杖玲，無(wú)需繳納其他費(fèi)用（現(xiàn)場(chǎng)加項(xiàng)或快遞報(bào)告除外）顿仇。</p>
   <p>3、訂單退改：支持未體檢訂單隨時(shí)退款摆马，退款不扣除額外費(fèi)用臼闻；如需修改體檢時(shí)間請(qǐng)至少在原體檢時(shí)間提前一天修改。</p>
</div>


// css
.notice
    {
        padding: 16px;
        font-size: 14px;
        line-height: 25px;
        flex: auto;
        overflow: auto;
        .notice-title
        {
            margin-bottom: 5px;
        }
       // 當(dāng)在一個(gè)層級(jí)下面時(shí)囤采，可以直接寫(xiě)p寫(xiě)樣式述呐，像img也可以
        p  
       {
            text-align: justify; // 直接這行代碼搞定
        }
    }

10. 超出高度顯示滾動(dòng)條

超出高度顯示滾動(dòng)條

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

11. tab欄上面不動(dòng)，下面內(nèi)容滾動(dòng)

tab欄上面不動(dòng)蕉毯，下面內(nèi)容滾動(dòng)

<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)">內(nèi)容 1</van-tab>
      <van-tab title="門(mén)診">內(nèi)容 2</van-tab>
    </van-tabs>
    <!-- tab欄 end-->

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

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