常用的代码

## 布局

微信小程序之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>
效果图：

![img](https://img-blog.csdn.net/20180530140804983?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



## 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;
}
效果图：

![img](https://img-blog.csdn.net/2018053108571913?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



#### flex-direction: row-reverse从右到左的水平方向为主轴

效果图：

![img](https://img-blog.csdn.net/20180531085825864?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



#### flex-direction: column从上到下的垂直方向为主轴

效果图：

![img](https://img-blog.csdn.net/20180531090221940?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



#### flex-direction: column-reverse从下到上的垂直方向为主轴

效果图：

![img](https://img-blog.csdn.net/20180531090335843?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

### 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;
}
效果图：

![img](https://img-blog.csdn.net/20180530150556226?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



#### flex-end 主轴终点对齐

效果图：

![img](https://img-blog.csdn.net/20180531090745534?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



#### center 主轴居中对齐。

效果图：

![img](https://img-blog.csdn.net/20180531090900916?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

#### space-between 两端对齐 左右贴边

效果图：

![img](https://img-blog.csdn.net/20180531091135182?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



#### space_around 两端对齐 左右不贴边

效果图：

![img](https://img-blog.csdn.net/20180531091224449?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1eW9uZ2hvbmcxMTIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)



### 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