React-Native学习之路(四)Flexbox和一些普通布局属性

react

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

回到顶部