Flexbox簡介

flexbox是屬于CSS的一種布局方案，可以簡單、完整、響應式的實現各種頁面布局。谷歌將其引入以提高復雜布局的能力。

源碼傳送門

Flexbox的布局和相關名稱

上圖模型中包含以下概念

flex container 父容器，用來包含子元素，對應于FlexboxLayout類。

flex item 子元素，父容器直接包裹的元素。

main axis 主軸，子元素通過主軸來排列，如上圖是從左往右。

corss axis 副軸，垂直于主軸的第二個軸

main start,main end 父容器中主軸開始和結束的邊界，子元素從main start往main end的方向排列(如果主軸是水平，起點在左端，main start,main end 用來控制子元素從左向右排列)

cross start,corss end 父容器中副軸開始和結束的邊界。子元素從cross start往cross end方向排列(如果主軸是水平的，那么副軸就是垂直的，假設如上圖，cross start 在上，cross end 在下，那么子元素就是從上往下排列)

Flexbox 布局示例

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" >

android:id="@+id/textview1"

android:layout_width="120dp"

android:layout_height="80dp"

app:layout_flexBasisPercent="50%"

/>

android:id="@+id/textview2"

android:layout_width="80dp"

android:layout_height="80dp"

app:layout_alignSelf="center"

/>

android:id="@+id/textview3"

android:layout_width="160dp"

android:layout_height="80dp"

app:layout_alignSelf="flex_end"

/>

或者代碼

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：子元素的排列方向，決定主軸和副軸的方向，有以下四個值，文字太雞肋，直接看圖結合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：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

alignItems 控制沿副軸對齊(單行起作用)

stretch(default)：如果項目未設置高度或設為auto，將占滿整個容器的高度。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。

alignContent ：控制沿副軸對齊(多行起作用)

stretch(default)：軸線占滿整個交叉軸。

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

子元素的屬性

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的模式時才有效。

與傳統CSS彈性布局不同之處

沒有flex-flow屬性 ：因為沒必要

沒有flex屬性：同樣沒必要

layout_flexBasisPercent 替代了flexBasis。如果子元素寬高確定了，可以指定具體值或百分比，如果是包裹內容，那只能是百分比

不能確定min-width和min-height：因為谷歌還沒實現

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的android垂直排列元素_Android弹性布局(FlexboxLayout)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。