RN中布局方式FlexBox、absolute

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无关

原文地址

参考文章

RN布局中遇到的层级问题(zIndex,elevation)

RN 中的 position 的理解

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值