display:flex 小程序简易使用方法

韩昊杰
2022-04-24 / 0 评论 / 151 阅读 / 正在检测是否收录...

display:flex 小程序简易使用方法

开发微信小程序,遇到了图片的一些问题,比如在某些界面中要求图片水平居中、垂直居中,在某些界面中要求图片铺满全屏幕。

.wxml文件

<view class='imagebox'>
  <image src="/images/1.png" mode="widthFix">
  </image>
</view>
  1. 图片水平居中

    .imagebox{
        display:flex;    /*设置为flex布局*/
        justify-content: center; /*水平居中*/
    }
    .imagebox image { 
        width:300rpx;
        height:300rpx;
    }
  2. 图片垂直居中

    .imagebox{
        display:flex;
        height: 500px; 
        justify-content: center;/*水平居中*/        
        align-items:center;  /*垂直居中*/
    
    }
    .imagebox image { 
        width:300rpx;
        height:300rpx;
    }
  1. 图片居中铺满全屏幕

    page{
        height:100%; /*设置高度100%,达到满屏状态*/
    }
    .imagebox{
        display:flex;
        height: 100%;/*重点,铺满全屏*/
        justify-content: center;
        align-items:center;
    
    }
    .imagebox image { 
        width:300rpx;
        height:300rpx;
    }
  2. 元素垂直居中

    
    .data{
    display: flex;
    justify-content: center;
    flex-direction:column;
    align-items:center;
    }
0

评论 (0)

取消