## 布局
微信小程序之flex布局
在微信小程序中，view是最基础的布局容器，其支持两种布局方式block、flex，默认情况下，view的布局方式是block，如下所示：
<view>
<view style='background:red;'>1</view>
<view style='background:blue;'>2</view>
<view style='background:yellow;'>3</view>
</view>
效果图：
## flex布局
### flex-direction 控制布局方向
在给view设置属性display: flex;之后，view的布局方式就会变为flex模式，此外还需要设置其flex-direction控制布局方向,flex-direction有4个值：
- flex-direction:row/*从左到右的水平方向为主轴*/
- flex-direction:row-reverse/*从右到左的水平方向为主轴*/
- flex-direction:column/*从上到下的垂直方向为主轴*/
- flex-direction:column-reverse/*从下到上的垂直方向为主轴*/
flex-direction: row;
<view class='flex'>
<view class='flex-item' style='background:red;'>1</view>
<view class='flex-item' style='background:blue;'>2</view>
<view class='flex-item' style='background:yellow;'>3</view>
</view>
.flex {
display: flex;
flex-direction: row;
background: lightgray
}
.flex-item {
width: 60px;
}
效果图：
#### flex-direction: row-reverse从右到左的水平方向为主轴
效果图：
#### flex-direction: column从上到下的垂直方向为主轴
效果图：
#### flex-direction: column-reverse从下到上的垂直方向为主轴
效果图：
### justify-content控制内容的对齐方式
设置完view的布局方向之后，想要控制内容的对齐方式，需要设置justify-content属性，该属性值有：
justify-content:flex-start;/*主轴起点对齐(默认值)*/
justify-content:flex-end;/*主轴终点对齐*/
justify-content:center;/*主轴居中对齐*/
justify-content:space-between;/*两端对齐，左右贴边*/
justify-content:space-around;/*两端对齐，左右不贴边*/
<view class='flex'>
<view class='flex-item' style='background:red;'>1</view>
<view class='flex-item' style='background:blue;'>2</view>
<view class='flex-item' style='background:yellow;'>3</view>
</view>
.flex {
display: flex;
flex-direction: row;
justify-content: flex-start;
background: lightgray
}
.flex-item {
width: 60px;
}
效果图：
#### flex-end 主轴终点对齐
效果图：
#### center 主轴居中对齐。
效果图：
#### space-between 两端对齐 左右贴边
效果图：
#### space_around 两端对齐 左右不贴边
效果图：
### align-items 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
`align-items`属性值有：
- align-items:stretch; /*填充整个容器(默认值)*/
- align-items:flex-start; /*起点对齐*/
- align-items:flex-end; /*终点对齐*/
- align-items:center; /*居中对齐*/
- align-items:baseline; /*以子元素的第一行文字对齐*/
#### flex-start
<view class='flex'>
<view class='flex-item' style='background:red; height:50px;'>1</view>
<view class='flex-item' style='background:blue; height:70px;'>2</view>
<view class='flex-item' style='background:yellow;height:90px;'>3</view>
</view>
.flex {
display: flex;
flex-direction: row;
background: lightgray;
justify-content: space-around;
align-items: baseline;
height: 100px;
}
.flex-item {
width: 60px;
}
效果图：
![img](https://img-blog.csdn.net/20180608112825273?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/font