flexbox 弹性盒子,布局是按权重进行分配。可以自行进行拉伸与扩展
flex布局分为两类,
1. flex容器 flexContainer
2. flex子类 flexItem
flex box布局分为两个轴:
1.水平(主轴) main axis
2.垂直 cross axis
最外层的叫 flexContainer
里边的子view 叫 flexItem
主轴的起点叫 main start
最右边的点叫 main end
十字轴最上边的点叫 cross start
十字轴最下边的点叫 cross end
如下图:
flex:1,表示占满整个屏幕。
如果想让子视图横向显示 可以设置 display:flex 或者是inline-flex,之后变为行内元素
flex-direction,设置的是main axis,也就是主轴的方向。
1.row:水平方向 row-reverse:水平倒置
2.column 垂直方向 column-reverse:垂直倒置
flex-wrap 系统默认的项目会在同一行显示
1.nowrap 不换行
2.wrap 自动换行 wrap-reverse:颠倒排列
flex-flow 集合了 flex-direction flex-wrap
应用实例:flex-flow:row-reverse wrap
justify-content (水平方向)调整项目位置以及项目与项目之间的间隔。默认为flex-start
flex-start:左边显示
flex-end:右边显示
center:居中显示
space-around:项目中间添加间隔 铺满整个屏幕,同时会在项目的周围添加一些间隔
space-between:项目中间添加间隔 铺满整个屏幕
align-items (垂直方向)
stretch:拉伸项目高度,让他跟容器的高度一样(系统默认)
flex-start:靠容器最上端(垂直轴的起点)
flex-end:靠容器最下端(垂直轴的终点)
center:靠容器中间(垂直轴的中间)
baseline:基线对齐,靠cross轴的最上边显示,会根据项目的不同高度调整对齐的方式
align-content (多行)
stretch:不同行项目拉伸对齐(系统默认)
flex-start:cross轴起点,不拉伸
flex-end:cross轴终点,不拉伸
center:cross轴终点,不拉伸
space-around:项目的周围添加一些间隔,间隔取决于容器剩余的空间
space-between:项目中间添加间隔 铺满整个屏幕
order (控制容器项目里面的顺序)默认为0
当order:1,会排在最后
当order:-1,会排在最前
flex-grow 利用容器剩下的水平空间
flex-grow:1 所有容器都一样
flex-basis:auto (默认) 100,初始化的宽度都为100
flex-shrink:0 不让项目随屏幕的宽度缩小而缩小
flex-shrink:3 比其他项目更容易缩小(比1大的正数)
也可以这样用
flex:0 1 auto ; 第一个为flex-grow 第二个为flex-shrink 第三个为flex-basis
align-self 单独设置某一个项目
auto:
flex-end:某一项目靠下显示
flex-search:拉伸显示
center:居中显示
margin:10,表示四周边距为10。
text 不支持backgroundColor,只支持color,也就是字体颜色。