@include 'common'

# Box 弹性布局组件

## 何时使用

用于弹性布局, 通过 display: flex 实现。
受浏览器限制，本功能支持到 IE10+。

## 展示

### 基本

简单的弹性布局展示，可以通过 spacing 控制子元素的间距。
@include 'demo1'

### 排布方向

默认子元素的排布方向为 column ， 可以通过 direction 参数修改为 row。
@include 'demo2'

### 内外边距

可以通过 padding margin 设置 Box 的内、外边距， [10, 5] 表示上下方向为 10，左右方向为 5。
@include 'demo3'

### 垂直水平对齐

justify align 等价于 justify-contents align-items，用来设置 Box 的主轴方向、垂直主轴方向的对齐方式，即：
direction 为 row 时， align 控制垂直方向, justify 控制水平方向；
direction 为 column 时(默认值)， justify 控制垂直方向, align 控制水平方向。
@include 'demo4'

### 折行

默认不折行，可以通过设置 wrap 控制折行。 受浏览器限制，本功能支持到 IE11+。
@include 'demo5'