FlexBox 布局基本用法
1、什么是FlexBox
Flexbox是
Flexible Box
的缩写,意为'弹性布局',它为盒状模型提供了很大的灵活性,让任何一个容器都可以指定为Flex布局任何一个容器都可以指定为Flex布局
2、基本概念和属性
使用Flex布局的元素,称为Flex容器(flex Container),简称'容器'。它的所有子元素自动成为容器的成员,称为Flex项目(flex Item)
先了解下标准的盒子模型:
下面主要讲解Flex的Container
属性 和 Item
属性
下面给出一张FlexBox布局的示例图:
从上面的示例图中可以看出,Flex容器默认存在两根轴:水平方向的主轴(main axis),与主轴垂直方向的交叉轴(cross axis)。主轴的排布方向是从左至右,交叉轴的排布方向是从上至下,Flex容器中的Item元素默认是按照主轴方向进行排序,Item占据主轴空间称为main size
,Item占据交叉轴空间称为cross size
3、Flex容器(Container)属性
- felxDirection
- justfyContent
- alignItems
- alignContent
- flexWrap
flexDirection (flex方向,控制item的主轴排列方向)
- row(主轴水平排列)
- column(主轴竖直排列)
- row-reverse(主轴水平从右开始排列)
- column-reverse(主轴竖直从下排列)
row的时候 水平为主轴,竖直为次轴;column时竖直为主轴,水平为次轴。
justfyContent (主轴方向的对齐方式(以主轴‘row’为例))
- flex-start起始位置对齐(左对齐)
- flex-end结束位置对齐(右对齐)
- center中心对齐(水平居中)
- space-between两端对齐,item之间间距平分
- space-around每个项目两端的间隔相等
alignItems(控制item在次轴上的排列方式,主要属性包括:(以主轴‘row’为例))
- flex-start:次轴起点开始(在竖直向上居顶显示)
- flex-end:次轴终点开始(在竖直向上居低显示)
- center:次轴中间开始(在竖直方向上居中显示)
- stretch:如果项目未设置高度或设为auto,将占满整个容器的高度
- baseline:第一行文字的基线对齐。
alignContent (控制多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用。以主轴‘row’为例)
- flex-start:(默认值)与交叉轴的起点对齐
- flex-end:与交叉轴的终点对齐
- center:与交叉轴的中点对齐
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
- space-around:每根轴线两侧的间隔都相等,轴线之间的间隔比轴线与边框的间隔大一倍
- stretch:轴线占满整个交叉轴
flexWrap(默认情况下,容器中的Item元素都排列在一条主轴线上,flex-wrap属性定义了如果在一条轴线上排列不下所有的Item元素,可以进行换行排列)
- nowrap:不换行,为默认效果
- wrap:换行,依次往后排
- wrap-reverse:换行,从后往前排
nowrap不换行,为默认效果
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
alignSelf (属性允许单个Item有与其他Item不一样的对齐方式,设置在子元素上可覆盖父元素alignItems的属性。默认值为auto,表示继承父元素的alignItems属性,如果没有父元素,则等同于stretch)
- flex-start:(默认值)交叉轴的起点对齐
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch:如果项目未设置高度或设为auto,将占满整个容器的高度
- auto
扩展:RN布局层级问题(zIndex,elevation)
一、zIndex是rn在0.30开始支持的属性,是可以生效的;
二、shadow(阴影)开头的样式现在可以在iOS上应用,但在安卓中是不生效的,而Android上对应的属性是elevation。设置elevation属性就等价于使用原生的elevation API,因而也有同样的限制(比如最明显的就是需要Android 5.0以上版本)。此外还会影响到层叠视图在空间z轴上的顺序。
结论
对于Android,两个同一层级的定位组件(position:“absolute”)
1、 既没有ZIndex属性,又没有elevation 属性时,在z轴的层叠关系由其摆放位置决定的,放在下面的组件会在上层;
2、 两个组件只有zIndex没有elevation属性时,zIndex大的在上层
3、 两个组件有elevation属性时,elevation大的在上层
4、 两个组件既有zIndex属性elevation属性时,以elevation为准
对于IOS,同层级的组件,z轴的层叠关系只与摆放顺序与zIndex有关,与elevation无关
参考文章