微信小程序Flex居中布局示例

所有示例以此 wxml 为基础

<view class='boxs'>
  <view class='box'></view>
  <view class='box'></view>
  <view class='box'></view>
</view>

.box{
  width: 200rpx;
  height: 200rpx;
  background: greenyellow;
  margin-right: 10rpx;
}

各位理解能力比较强的可以先理解一下这张图，就会对flex布局有更进一步的理解：

 

一、水平居中

1、排列方向为水平方向

.boxs{
  display: flex;
  align-items: center;
}

2、排列方向为竖直方向

.boxs{
  display: flex;
  flex-direction: column;
  align-items: center;
}

 

二、垂直居中

1、排列方向为水平方向

.boxs{
  display: flex;
  flex-direction:column;
  justify-content: center;
}

2、排列方向为竖直方向

.boxs{
  display: flex;
  justify-content: center;
}

 

三、中心居中

1、排列方向为水平方向

.boxs{
  display: flex;
  align-items: center;
  justify-content: center;
}

2、排列方向为竖直方向

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