Flexbox是什么
FlexboxLayout
這是谷歌官方推出的控件,各方面都很完善.
如何使用
gradle導(dǎo)入這個依賴包
XML中使用
最簡單的使用
這樣僅僅只是使用了這個控件而言,這個還有很多的方法
屬性
1. app:flexDirection
這個屬性是決定了排列方向,一共4個值( row , row-reverse , column , column-reverse )
row : 水平方向,起點(diǎn)在左
row 排列順序
row_reverse : 水平方向吕嘀,起點(diǎn)在右
row-reverse 排列順序
column : 垂直方向黍翎,起點(diǎn)在上
column 排列順序
*** column_reverse : 垂直方向境氢,起點(diǎn)在下***
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兩側(cè)的間隔相等
space_around
4. 其他屬性(沒玩過,截圖自其他解析)
如下圖所示
http://www.oschina.net/news/73442/google-flexbox-layout
5. 子View屬性 app:layout_order
這個屬性可以控制子View排列的順序,按照從小到大的順序依次排列
沒使用order的情況(默認(rèn)排序)
使用了order的情況(order值大的排在最后)
6. 子View屬性 app:layout_flexGrow
這個屬性和 LinerLayout 的 weight 屬性一樣
7. 子View其他屬性(沒玩過,截圖自其他解析)
Last
跟多知識點(diǎn)可以參考下面這個網(wǎng)站(雖然是CSS的,但是都是相通的)
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool