Flex布局：定义子控件的布局及其自身的显示规则

Flex布局使用的属性可以简单分为以下两类：

1.指定子控件

2 的布局规则。定义组件本身在

LinearLayout显示规则中，我们使用orientation来确定内部子组件的布局方向，例如TextView、ImageView等。布局方向，因此我们使用 orientation 属性来定义布局。子控件的规则，上面包括第一类！

子组件本身具有属性。例如，如果我希望 TextView 的文本居中怎么办？目前，Linearlayout 属性没有任何作用。必须利用组件本身的重力属性来调整。这属于第二类，它定义了组件本身的显示规则。

1.1 定义了子控制器的布局规则

1.1.1 flex-direction VS orientation

在Flex布局中，使用flexDirection属性来指定组件布局的方向。和orientation一样，有水平和垂直布局，但是flexDirection行

有四个值是水平方向排列的，这和orientation一样：水平函数

row -reversed

中水平方向，但从右向左排列

列

列表示垂直排列，和orientation：垂直有同样的效果。指定组件从上到下排列。

column-wrap

垂直布局，但是从下到上

1.1.2 flex-wrap

该属性的作用：如果某行无法排序，是否允许该行换行。 nowrap

该值表示即使一行显示不小，也不允许换行，因此后面的元素将不可见

wrap

该值表示如果一行无法排列，则会自动覆盖。

wrap-back 和layout-gravity 属性类似，都设置容器中组件的对齐方式。布局重力可以设置为center、left、right，也可以设置justifyContent。具体来说，如下图所示：

flex-start：左对齐

flex-end：右对齐

middle：居中对齐

两端空格对齐：控件之间的间距相等

circle-circle：每个item两边的距离相等

1.1.4align-Items

该属性定义如何垂直排列。看图片！ - content

此属性定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

复制代码

1.2 指定控制器本身的显示规则

order:定义组件的排列顺序，数据越小，排列越靠前
flex-grow:定义组件的放大比例，默认为0，即存在剩余控件也不放大
flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
align-self:align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

作者：Xiao Wang Staive