安裝

build 依賴

dependencies {
    implementation ‘com.google.android:flexbox:1.0.0‘
}

FlexboxLayout 屬性介紹

flexDirection

flex-direction?屬性決定主軸的方向（即內部子元素的排列方向）。
-?row（默認值）：水平顯示，起點在左端 -?row_reverse：水平顯示，起點在右端，與row相反的順序 -?column：垂直顯示，起點在頂部 -?column_reverse：垂直顯示，起點在底部，與column相反的順序

xml中使用app:flexDirection="row"，代碼中使用flexboxLayout.setFlexDirection(FlexDirection.ROW)

這裏為了演示布局緊湊，不讓元素撐滿整個布局，xml裏設置了app:alignItems="flex_start"，app:alignContent="flex_start"，後續有對alignItems和alignContent的屬性介紹，讀者可以去除這兩個屬性看看演示效果。

flexWrap

flexWrap?決定是否換行
-?nowrap（默認值）：不換行 -?wrap：按正常方向換行，第一行在上方 -?wrap_reverse：按反方向換行，第一行在下方

xml中使用app:flexWrap="nowrap"，代碼中使用flexboxLayout.setFlexWrap(FlexWrap.NOWRAP)

justifyContent

justifyContent決定元素在主軸上的對齊方式
-?flex_start（默認值）：主軸方向起點對齊 -?flex_end：主軸方向終點對齊 -?center： 主軸方向居中對齊 -?space_between：主軸方向兩端對齊，元素之間的間隔都相等。 -?space-around：每個元素兩側的間隔相等。所以，元素之間的間隔比元素與布局邊框的間隔大一倍。

xml中使用app:justifyContent="flex_start"，代碼中使用flexboxLayout.setJustifyContent(JustifyContent.FLEX_START)
註意這裏是?主軸方向?上的對齊方式即flexDirection屬性，例如主軸如果是row水平方向的，那麽center屬性就是水平居中，如果是column，那麽就是垂直方向居中。

alignItems

alignItems決定元素在交叉軸方向上的對齊方式，「交叉軸」 我理解的就是 與主軸交叉垂直的方向，比如主軸是水平的，那麽交叉軸就是垂直方向的
-?stretch（默認值）：交叉軸方向占滿整個父布局。 -?flex_start交叉軸的起點對齊 -?flex_end交叉軸的終點對齊。 -?center交叉軸的居中對齊 -?baseline元素第一行文字的基線對齊

默認值是stretch，不管元素布局設置的寬高多少，都會在交叉軸方向占滿父布局，例如flexDirection是默認row水平方向，那麽元素就會在垂直方向撐滿父布局。
一般會選擇使用flex_start屬性，可以自由控制元素的大小。

alignContent

alignContent決定了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
-?stretch（默認值）：軸線占滿整個交叉軸。 -?flex_start?交叉軸方向起點對齊 -?flex_end?交叉軸方向終點對齊 -?center?交叉軸方向居中對齊 -?space_between?交叉軸方向兩端對齊，元素之間的間隔都相等 -?space_around?每個元素兩側的間隔相等。所以，元素之間的間隔比元素與布局邊框的間隔大一倍

alignContent是在多行的情況下起作用。
justifyContent設置主軸方向的對齊方式，alignContent是設置交叉軸方向的對齊方式。例如元素是水平方向換行，justifyContent設置center屬性就是水平居中，alignContent設置center屬性就是垂直居中。

divider屬性

描述了元素間的分割線
-?showDividerHorizontal四個屬性none?|?beginning?|?middle?|?end，beginning顯示線條在布局的上面，end顯示線條在布局的下面 -?dividerDrawableHorizontal?水平分隔線放在伸縮線之間 -?showDividerVertical?beginning顯示線條在布局的左邊，end顯示線條在布局的右邊 -?dividerDrawableVertical?垂直分隔線放在伸縮線之間 -?showDivider?配合dividerDrawableHorizontal就是showDividerHorizontal的效果，配合dividerDrawableVertical就是showDividerVertical的效果，配合dividerDrawable就是顯示水平和垂直方向的線條 -?dividerDrawable?drawable屬性，配合showDivider可以顯示水平和垂直方向的線條

app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="wrap"
app:dividerDrawable="@drawable/divider"
app:showDivider="beginning|end|middle"

子元素屬性

除了給FlexboxLayout自身設置屬性，還可以給到子元素設置屬性

layout_order

layout_order可以改變元素排列順序，默認值是1，按順序排列的，值越大，排列越靠後
文字1的textView的屬性app:layout_order="2"，其余為默認1

layout_flexGrow

layout_flexGrow決定元素的放大比例，默認不放大，值為0。如果一個元素的layout_flexGrow?屬性為2，其他元素為1，則前者占據的剩余空間將比其他的多一倍。屬性類似於LinearLayout的weight屬性。
三個view的app:layout_flexGrow值分別為1、1、2

layout_flexShrink

layout_flexShrink?決定元素的縮小比例，默認為1，即當空間不足是，該元素被縮小。值越大，縮小比例越大，0的話則不縮小。空間足夠的情況，屬性無效。
三個view的app:layout_flexShrink值分別為2、1、1

layout_alignSelf

layout_alignSelf允許單個子元素有與其他子元素不一樣的對齊方式，默認值為auto，繼承父元素的alignItems?屬性，其余屬性值同alignItems屬性
第一個viewapp:layout_alignSelf="center"垂直居中

layout_flexBasisPercent

layout_flexBasisPercent?決定了在分配多余空間之前，子元素占據的主軸空間的百分比。默認為自身大小
第一個viewapp:layout_flexBasisPercent="50%"水平占比50%

與recyclerView搭配

FlexboxLayout的應用可謂廣泛，主流的tag標簽 流式布局就可以使用FlexboxLayout動態添加view去實現，例外還可以使用RecyclerView的布局管理器FlexboxLayoutManager來完成流式布局。

FlexboxLayoutManager manager = new FlexboxLayoutManager(this);
manager.setFlexDirection(FlexDirection.ROW);
manager.setFlexWrap(FlexWrap.WRAP);
recyclerView.setLayoutManager(manager);

同樣圖片的流式布局原理相通，這裏就不一一列舉。

Android 彈性布局 FlexboxLayout了解一下