React-Native学习之路(四)Flexbox和一些普通布局属性
Flexbox和一些普通布局属性
2018年7月20日
20:23
flexbox是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采用flex布局的元素,称为flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称"项目"。
首先看下flexbox的排列:分为主轴和交叉轴(侧轴)
Flexbox的各种属性
1).flexDirection:
主要用来设置项目的排列方式有:row和column两种,然后可以通过reverse进行取反(其默认为column)
2).flexWrap:
包含内容,默认值是nowrap,不包裹所有内容,即不允许多行排列它也有两种方式分别是nowrap和wrap
若为wrap:它就会在不能wrap的时候换行
若为wrap(默认):它就不会对内容进行包裹,直接显示,也就出现了显示不完的状况,也就没换行
3).alignItems:
4).justifyContent
justifyContent属性定义了浏览器如何分配顺着父容器主轴的弹性(flex)元素之间及其周围的空间,默认为flex-start。enum:{flex-start,flex-end,center,space-between,space-around}
各个效果如图:
5).alignSelf
这个区别于alignItems,alignItems是相对于父视图进行排列,而alignSelf是相对于子视图而言的,它可以单独的一个项目来进行相关视图设计。
在view根视图中的第一个视图进行设置,设置第一个的为flex-end,那这个属性就只对第一个项目起作用
6).flex:
flex 属性定义了一个可伸缩元素的能力,默认为0。可以理解为按比例分配空间。
假设按上图方式排列我将2的flex设置为1(其他默认为0),结果如图
若依次设置1234的flex为4321,结果如图:
视图边框
- borderBottomWidth number 底部边框宽度
- borderLeftWidth number 左边框宽度
- borderRightWidth number 右边框宽度
- borderTopWidth number 顶部边框宽度
- borderWidth number 边框宽度
- borderColor 边框颜色
尺寸
- width number
- height number
外边距
- margin number 外边距
- marginBottom number 下外边距
- marginHorizontal number 左右外边距
- marginLeft number 左外边距
- marginRight number 右外边距
- marginTop number 上外边距
- marginVertical number 上下外边距
内边距
- padding number 内边距
- paddingBottom number 下内边距
- paddingHorizontal number 左右内边距
- paddingLeft number 做内边距
- paddingRight number 右内边距
- paddingTop number 上内边距
- paddingVertical number 上下内边距
注意:在设置内边距的时候是去设置父视图的padding而不是子视图,外边距同理
定位(position)
position enum(‘absolute’, ‘relative’)属性设置元素的定位方式,为将要定位的元素定义定位规则。
- absolute:生成绝对定位的元素,元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
- relative:生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。
以上是 React-Native学习之路(四)Flexbox和一些普通布局属性 的全部内容, 来源链接: utcz.com/z/381168.html