Flex布局:规定子控件的排列与自身显示规则

2020年6月24日21:34:03 发表评论 63 views

Flex布局所使用的到的属性,简单分为以下两类:

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

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

LinearLayout中,我们使用orientation来规定内部子组件的排列方向,如TextView,ImageView的排列方向等,所以说orientation这个属性是用来规定子控件的排列规则的属性,他属于上面的第一类!

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

Flex布局:规定子控件的排列与自身显示规则

1.1规定子控件的排列规则

1.1.1 flex-direction VS orientation

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

row

按照水平方向排列,和orientation:horizontal作用相同

Flex布局:规定子控件的排列与自身显示规则

row-reverse

按照水平方向排列,但是从右向左排列

Flex布局:规定子控件的排列与自身显示规则

column

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

Flex布局:规定子控件的排列与自身显示规则

column-reverse

垂直方向排列,但是从下至上

Flex布局:规定子控件的排列与自身显示规则

1.1.2 flex-wrap

这个属性的作用:当一行排列不下的时候,是否允许换行

nowrap

该值表明,即使一行显示不小,也不允许换行,导致后面的元素不可见

Flex布局:规定子控件的排列与自身显示规则

wrap

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

Flex布局:规定子控件的排列与自身显示规则

wrap-reverse

该值表示,当无法显示完全时,会换行且第一行在下方

Flex布局:规定子控件的排列与自身显示规则

1.1.3 justify-Content VS layout-gravity

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

Flex布局:规定子控件的排列与自身显示规则

flex-start:向左对齐

flex-end:向右对齐

center:居中对齐

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

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

1.1.4 align-Items

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

Flex布局:规定子控件的排列与自身显示规则

flex-start:与上方对齐

flex-end:与下方对齐

center:垂直居中

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

align-content

该属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

Flex布局:规定子控件的排列与自身显示规则
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。

作者:小王同学Staive

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: