## Flex布局
1. 基本Flex布局

![](http://res.winbaoxian.com/autoUpload/common/flex1_c77235b5606411e.png)
```html
<div class="bx-flex">
  <div class="bx-flex-item"></div>
  <div class="bx-flex-item"></div>
  <div class="bx-flex-item"></div>
</div>
```
2. 换行

![](http://res.winbaoxian.com/autoUpload/common/flex2_60fb116cc991464.png)
```html
<div class="bx-flex bx-flex--wrap"></div>
```
3. 主轴对齐

![](http://res.winbaoxian.com/autoUpload/common/flex3_c08ae9ce920f447.png)
```html
<!-- 左对齐 -->
<div class="bx-flex bx-flex-main--start"></div>
<!-- 右对齐 -->
<div class="bx-flex bx-flex-main--end"></div>
<!-- 居中 -->
<div class="bx-flex bx-flex-main--center"></div>
<!-- 两端对齐，项目之间的间隔都相等 -->
<div class="bx-flex bx-flex-main--space-between"></div>
<!-- 每个项目两侧的间隔相等 -->
<div class="bx-flex bx-flex-main--space-around"></div>
```
4. 交叉轴对齐

![](http://res.winbaoxian.com/autoUpload/common/flex4_0ca75b64ccd5443.png)
```html
<!-- 交叉轴的起点对齐 -->
<div class="bx-flex bx-flex-cross--start"></div>
<!-- 交叉轴的终点对齐 -->
<div class="bx-flex bx-flex-cross--end"></div>
<!-- 交叉轴的中点对齐 -->
<div class="bx-flex bx-flex-cross--center"></div>
<!-- 项目的第一行文字的基线对齐 -->
<div class="bx-flex bx-flex-cross--baseline"></div>
<!-- 默认值,如果项目未设置高度或设为auto，将占满整个容器的高度 -->
<div class="bx-flex bx-flex-cross--stretch"></div>
```