Flex布局基础知识

Flex布局所使用的到的属性，简单分为如下两类：

1.规定子控件的排列规则

2.决定组件自身的显示规则

LinearLayout中，咱们使用orientation来规定内部子组件的排列方向，如TextView，ImageView的排列方向等，因此说orientation这个属性是用来规定子控件的排列规则的属性，他属于上面的第一类！

子组件自身也有属性，好比TextView内的文字想要实现居中怎么办？ 这时候在Linearlayout中的属性，就没有做用了，要使用gravity这一组件自身的属性来进行设置，这属于第二类，决定组件自身的显示规则，

1.1规定子控件的排列规则

1.1.1 flex-direction VS orientation

在Flex布局中，使用flexDirection属性来规定组件排列的方向，就像orientation同样，有水平排列和垂直排列，可是flexDirection的值有四种

row

按照水平方向排列，和orientation：horizontal做用相同

row-reverse

按照水平方向排列，可是从右向左排列

column

column表示垂直排列，和orientation：vertical的做用的相同。规定组件从上到下进行排列。

column-reverse

垂直方向排列，可是从下至上

1.1.2 flex-wrap

这个属性的做用：当一行排列不下的时候，是否容许换行

nowrap

该值代表，即便一行显示不小，也不容许换行，致使后面的元素不可见

wrap

该值表示，当一行排列不下的时候，会自动和换行。

wrap-reverse

该值表示，当没法显示彻底时，会换行且第一行在下方

1.1.3 justify-Content VS layout-gravity

justifyContent属性和layout-gravity属性相似，都是设置组件在容器中的对齐方式。layout-gravity能够设置center,left,right,justifyContent也能够设置。具体以下图所示：

flex-start:向左对齐

flex-end:向右对齐

center:居中对齐

space-between:两端对齐，控件之间的间隔相同

space-around:每一个项目两侧的间距相等

1.1.4 align-Items

该属性规定了在垂直方向上怎么排列。看图！

flex-start:与上方对齐

flex-end:与下方对齐

center:垂直居中

stretch:若是没有设置默认高度就会占满整个父容器的高度

align-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。

复制代码