Flexbox是什么

FlexboxLayout

这是谷歌官方推出的控件,各方面都很完善.

如何使用

gradle导入这个依赖包

XML中使用

最简单的使用

这样仅仅只是使用了这个控件而言,这个还有很多的方法

属性

1. app:flexDirection

这个属性是决定了排列方向,一共4个值( row , row-reverse , column , column-reverse )

row : 水平方向，起点在左

row 排列顺序

row_reverse : 水平方向，起点在右

row-reverse 排列顺序

column : 垂直方向，起点在上

column 排列顺序

*** column_reverse : 垂直方向，起点在下***

column-reverse 排列顺序

2. app:flexWrap

这个属性是换行排列方式,一共3个值( nowrap , wrap , wrap_reverse )

nowarp : 不换行

nowarp

warp : 换行

warp

wrap_reverse: 反向换行

warp_reverse

3. app:justifyContent

这个属性是决定了子View的对齐方式,一共5个值( center , space_around , space_between , flex_start , flex_end )

center : 居中

center

flex_start : 左对齐

flex_start

flex_end : 右对齐

flex_end

space_between : 两端对齐，子View之间的间隔都相等

space_between

space_around : 每个子View两侧的间隔相等

space_around

4. 其他属性(没玩过,截图自其他解析)

如下图所示
http://www.oschina.net/news/73442/google-flexbox-layout

5. 子View属性 app:layout_order

这个属性可以控制子View排列的顺序,按照从小到大的顺序依次排列

没使用order的情况(默认排序) 使用了order的情况(order值大的排在最后)

6. 子View属性 app:layout_flexGrow

这个属性和 LinerLayout 的 weight 属性一样

7. 子View其他属性(没玩过,截图自其他解析)

Last

跟多知识点可以参考下面这个网站(虽然是CSS的,但是都是相通的)
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool