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