Flexbox簡介
flexbox是屬于CSS的一種布局方案硫椰，可以簡單蓖救、完整竭贩、響應(yīng)式的實現(xiàn)各種頁面布局瑞躺。谷歌將其引入以提高復(fù)雜布局的能力敷搪。
源碼傳送門
Flexbox的布局和相關(guān)名稱
上圖模型中包含以下概念
- flex container 父容器，用來包含子元素隘蝎，對應(yīng)于FlexboxLayout類。
- flex item 子元素襟企，父容器直接包裹的元素嘱么。
- main axis 主軸，子元素通過主軸來排列顽悼，如上圖是從左往右曼振。
- corss axis 副軸几迄，垂直于主軸的第二個軸
- main start,main end 父容器中主軸開始和結(jié)束的邊界，子元素從main start往main end的方向排列（如果主軸是水平冰评，起點在左端映胁，main start,main end 用來控制子元素從左向右排列）
- cross start,corss end 父容器中副軸開始和結(jié)束的邊界。子元素從cross start往cross end方向排列(如果主軸是水平的甲雅，那么副軸就是垂直的解孙，假設(shè)如上圖，cross start 在上抛人，cross end 在下弛姜，那么子元素就是從上往下排列)
Flexbox 布局示例
<com.google.android.flexbox.FlexboxLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="stretch" >
<TextView
android:id="@+id/textview1"
android:layout_width="120dp"
android:layout_height="80dp"
app:layout_flexBasisPercent="50%"
/>
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_alignSelf="center"
/>
<TextView
android:id="@+id/textview3"
android:layout_width="160dp"
android:layout_height="80dp"
app:layout_alignSelf="flex_end"
/>
</com.google.android.flexbox.FlexboxLayout>
或者代碼
FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexboxLayout.FLEX_DIRECTION_COLUMN);
View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.order = -1;
lp.flexGrow = 2;
view.setLayoutParams(lp);
屬性介紹
Contatiner的屬性
- flexDirection：子元素的排列方向，決定主軸和副軸的方向妖枚，有以下四個值廷臼，文字太雞肋，直接看圖結(jié)合demo一目了然绝页。
-
row (default)
-
row_reverse
-
column
-
column_reverse
- flexWrap：控制單行和多行荠商，以及副軸的方向
- nowrap (default) 不換行
- wrap 換行
- wrap_reverse 副軸方向置反
- justifyContent 控制沿主軸對齊
- flex-start（default）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等续誉。
- space-around：每個項目兩側(cè)的間隔相等莱没。所以，項目之間的間隔比項目與邊框的間隔大一倍屈芜。
- alignItems 控制沿副軸對齊(單行起作用)
- stretch（default）：如果項目未設(shè)置高度或設(shè)為auto郊愧，將占滿整個容器的高度。
- flex-start：交叉軸的起點對齊井佑。
- flex-end：交叉軸的終點對齊属铁。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊躬翁。
- alignContent ：控制沿副軸對齊(多行起作用)
- stretch（default）：軸線占滿整個交叉軸焦蘑。
- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊盒发。
- center：與交叉軸的中點對齊例嘱。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布宁舰。
- space-around：每根軸線兩側(cè)的間隔都相等拼卵。所以，軸線之間的間隔比軸線與邊框的間隔大一倍蛮艰。
子元素的屬性
- layout_order： 控制子元素布局的順序腋腮，默認值為1，順序為XML中元素的順序
- layout_flexGrow 類似于weight。
- layout_flexShrink 空間不足時即寡，子元素縮小徊哑，如果為0，不變化
- layout_alignSelf 允許單個元素有不一樣的對齊方式聪富，會覆蓋align-item,除auto外莺丑，其他取值都和align-item的含義一致。
- auto (default) 繼承父元素的align-item
- flex_start
- flex_end
- center
- baseline
- stretch
- layout_flexBasisPercent 只能為百分比的值墩蔓，只有父元素是MeasureSpec.EXACTLY的模式時才有效梢莽。
與傳統(tǒng)CSS彈性布局不同之處
- 沒有flex-flow屬性 ：因為沒必要
- 沒有flex屬性：同樣沒必要
- layout_flexBasisPercent 替代了flexBasis。如果子元素寬高確定了钢拧，可以指定具體值或百分比蟹漓，如果是包裹內(nèi)容，那只能是百分比
- 不能確定min-width和min-height：因為谷歌還沒實現(xiàn)
相關(guān)鏈接：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://github.com/google/flexbox-layout/wiki
https://blog.stylingandroid.com/flexboxlayout-part-1/
