# Flexbox
`Flexbox` 功能由 `Flexbox` 及 `FlexboxItem` 子组件组成。
:::demo `flexbox` 排版组件
```html
1
1
1
```
:::
### Flexbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| gutter | `Flexbox`子元素之间的间隙宽度,基于`orient`属性来判定，当`orient`设置值为`horizontal`时,设置`FlexboxItem`的`margin-left`样式，当`orient`设置值为`vertical`时,设置`FlexboxItem`的`margin-top`样式 | `Number` | — | `8px` |
| orient | 设置子元素的排列方向 | `String` | `horizontal` or `vertical` | `horizontal` |
| justify| 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。 | `String` | `flex-start`、`flex-end`、`center`、`space-between`、`space-around` | — |
| align| 定义项目在交叉轴上如何对齐。 | `String` | `stretch`、`center`、`flex-start`、`flex-end`、`baseline`、`initial`、`inherit` | — |
| wrap| 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 | `String` | `nowrap`、`wrap`、`wrap-reverse` | — |
| direction| 属性决定主轴的方向（即项目的排列方向）。 | `String` | `row`、`row-reverse`、`column`、`column-reverse` | — |
### 注解：
##### orient
- horizontal: 水平方向
- vertical: 垂直方向
##### justify
- flex-start: 弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
- flex-end: 弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
- center: 弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
- space-between: 弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
- space-around: 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
##### align
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
##### wrap
- nowrap（默认）：不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。
### Flexbox Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |------------- |---------------|------------ |-------- |
| span | 当前子元素占父元素宽度百分比 | `Number`Or`String` | — | — |
| order | — | `Number`Or`String` | — | — |
| grow | — | `Number`Or`String` | — | — |