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 布局示例
<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：子元素的排列方向，决定主轴和副轴的方向，有以下四个值，文字太鸡肋，直接看图结合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：因为谷歌还没实现
相关链接：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://github.com/google/flexbox-layout/wiki
https://blog.stylingandroid.com/flexboxlayout-part-1/
