微信小程序页面布局采用flex布局。flex布局是W3C在2009年提出的一种新的方案，以简便、完整、响应式的实现各种页面布局。
flex布局提供了元素在容器中的对齐、方向、顺序、甚至动态的或大小不确定的。
一、flexbox模型
display属性
flexbox 由伸缩容器和伸缩项目组成。将元素的display属性设置为flex和inline-flex，可以得到一个伸缩容器。
设置为flex的容器被渲染成一个块级元素，而设置为inline-flex的容器则被渲染成一个行内元素。flex-direction属性
flex-direction属性和旧版本的box-orient属性相似，都是设置伸缩项目的排列方式，设置从上往下排列如下所示：
div { flex-direction: column ;}
flex-direction 选项含义表:
| 属性值 | 说明 |
|---|---|
| row | 设置从左到右排列 |
| row-reverse | 设置从右到左排列 |
| column | 设置从上到下排列 |
| column-reverse | 设置从下到上排列 |
- flex-wrap属性
flex-wrap属性与旧版本的box-lines相似。设置无法容纳时，自动换行如下所示：
div { -ms-flex-wrap: -wrap; }
flex-wrap 属性取值表:
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，都在一行或一列显示 |
| wrap | 伸缩项目无法容纳时，自动换行 |
| wrap-reverse | 伸缩项目无法容纳时，自动换行，方向和wrap相反 |
- flex-flow属性
flex-flow属性是集合了排列方向和控制换行的简写形式
justify-content属性和旧版本中的box-pack相似，设置伸缩项目的对齐方式。
div { justify-content: space-around; }
flex-flow属性其他取值表：
| 属性值 | 说明 |
|---|---|
| flex-start | 伸缩项目以起始点靠齐 |
| flex-end | 伸缩项目以结束点靠齐 |
| Center | 伸缩项目以中心点靠齐 |
| space-between | 伸缩项目平局分布 |
| space-around | 同上，但两端保留一半的空间 |
- align-items属性
align-items属性和旧版本的box-align相似，用于处理伸缩容器的额外空间。
div { align-items: center; }
- flex属性
flex属性和旧版的box-flex相似，用于控制伸缩容器的比例分配。
flex: 1;
二、实例
.wxml
<view class='flex-wrap'>
<view class='a'>1</view>
<view class='b'>2</view>
<view class='c'>3</view>
</view>
.wxss
page{
height:100%;
}
/* 这个page很关键 */
.flex-wrap{
display: -webkit-flex;
}
.flex-wrap view{
width: 200rpx;
height: 200rpx;
text-align: center;
line-height: 200rpx;
font-size: 40rpx;
color: white;
}
.a{
background-color: green;
}
.b{
background-color: blue;
}
.c{
background-color: purple;
}
flex-wrap-1.png
调整[flex比例调整]：
page{
height:100%;
}
/* 这个page很关键 */
.flex-wrap{
display: -webkit-flex;
}
.flex-wrap view{
/* width: 200rpx; */
height: 200rpx;
text-align: center;
line-height: 200rpx;
font-size: 40rpx;
color: white;
}
.a{
background-color: green;
flex: 1;
/*占据整个盒子的1/4*/
}
.b{
background-color: blue;
flex: 1;
/*占据整个盒子的1/4*/
}
.c{
background-color: purple;
flex: 2;
/*占据整个盒子的2/4*/
}
flex-wrap-2.png
设置flex-direction: column;
page{
height:100%;
}
/* 这个page很关键 */
.flex-wrap{
display: -webkit-flex;
flex-direction: column;
height: 800rpx;
}
.flex-wrap view{
/* width: 200rpx; */
/* height: 200rpx; */
text-align: center;
line-height: 200rpx;
font-size: 40rpx;
color: white;
}
.a{
background-color: green;
flex: 1;
/*占据整个盒子的1/4*/
}
.b{
background-color: blue;
flex: 1;
/*占据整个盒子的1/4*/
}
.c{
background-color: purple;
flex: 2;
/*占据整个盒子的2/4*/
}
flex-column.png
三、补充
ps：关于flexbox还有很多的属性，这里大致铺垫了一下，如需要，则请查看微信小程序开发文档
