微信小程序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;
}

排列方向为竖直方向示意图

本文早期发布于个人 CSDN 博客：查看原文