flexDirection
flexDirection enum('row', 'column','row-reverse','column-reverse')
flexDirection属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式。
* row: 从左向右依次排列
* row-reverse: 从右向左依次排列
* column(default): 默认的排列方式，从上向下排列
* column-reverse: 从下向上排列
flexWrap
flexWrap enum('wrap', 'nowrap')
flexWrap属性定义了子元素在父视图内是否允许多行排列，默认为
nowrap。
1. nowrap flex的元素只排列在一行上，可能导致溢出。
2. wrap flex的元素在一行排列不下时，就进行多行排列。
justifyContent
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
justifyContent属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为flex-start。
1. flex-start(default) 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
2. flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
3. center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
4. space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
5. space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
alignItems
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignItems属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为stretch。
1. flex-start 元素向侧轴起点对齐。
2. flex-end 元素向侧轴终点对齐。
3. center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
4. stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
alignSelf
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf属性以属性定义了flex容器内被选中项目的对齐方式。注意：alignSelf 属性可重写灵活容器的 alignItems 属性。
1. auto(default) 元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
2. stretch 元素被拉伸以适应容器。
3. center 元素位于容器的中心。
4. flex-start 元素位于容器的开头。
5. flex-end 元素位于容器的结尾。
flex
flex number
flex 属性定义了一个可伸缩元素的能力，默认为0。
position
position enum('absolute', 'relative')属性设置元素的定位方式，为将要定位的元素定义定位规则。
1. absolute：生成绝对定位的元素，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
2. relative：生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
padding
1. padding number 内边距
2. paddingBottom number 下内边距
3. paddingHorizontal number 左右内边距
4. paddingLeft number 做内边距
5. paddingRight number 右内边距
6. paddingTop number 上内边距
7. paddingVertical number 上下内边距
margin
1. margin number 外边距
2. marginBottom number 下外边距
3. marginHorizontal number 左右外边距
4. marginLeft number 左外边距
5. marginRight number 右外边距
6. marginTop number 上外边距
7. marginVertical number 上下外边距
width
width number
height
height number
border
1. borderBottomWidth number 底部边框宽度
2. borderLeftWidth number 左边框宽度
3. borderRightWidth number 右边框宽度
4. borderTopWidth number 顶部边框宽度
5. borderWidth number 边框宽度
6. border<Bottom|Left|Right|Top>Color 个方向边框的颜色
7. borderColor 边框颜色
网友评论