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 像素。