前言

前面一篇文章中，已经说了基础组件。那么接下来就是容器组件

布局容器基础知识

容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局，帮助生成精美的页面。
在静态布局中，总体来说，组件是从上到下的布局模式。我们就可以将页面布局看作一个二维平面，分别叫做主轴和交叉轴，两个轴始终是相互垂直的。

Column & Row

看到这个的时候，如何你使用过flex 布局,那么就完全可以理解了。如果没有使用过，你可以把它想象成一行或一列的表格。

语法

Column(value?: {space?: string|number}
Row(value?: {space?: string|number}

可选参数

space: 子组件在主轴方向上的间距

属性

Column和Row 在主轴和交叉轴可以使用 justifyContent 和alignItems

属性名称	描述
justifyContent	设置子组件在主轴方向上的对齐格式。
alignItems	设置子组件在交叉轴方向上的对齐格式。

主轴的对齐（justifyContent）

子组件在主轴方向上的对齐使用justifyContent属性来设置，其参数类型是FlexAlign

FlexAlign属性	描述
Start	元素在主轴方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐
Center	元素在主轴方向中心对齐，第一个元素与行首的距离以及最后一个元素与行尾距离相同。
End	元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐。
SpaceBetween	元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
SpaceAround	元素在主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
SpaceEvenly	元素在主轴方向等间距布局，无论是相邻元素还是边界元素到容器的间距都一样。

交叉轴的对齐（alignItems）

子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。

• HorizontalAlign
  HorizontalAlign 是 Column容器 来设置 交叉轴对齐方式

HorizontalAlign属性	描述
Start	设置子组件在水平方向上按照起始端对齐
Center	（默认值），设置子组件在水平方向上居中对齐。
End	设置子组件在水平方向上按照末端对齐。

• VerticalAlign
  VerticalAlign 是 Row容器 来设置 交叉轴对齐方式

VerticalAlign属性	描述
Start	设置子组件在垂直方向上居顶部对齐
Center	（默认值），设置子组件在竖直方向上居中对齐。
End	设置子组件在竖直方向上居底部对齐。