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

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;
   }

3. 图片居中铺满全屏幕

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

4. 元素垂直居中

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