React Native 样式(style):
1.React Native中的FlexBox 和Web CSSS上FlexBox的不同之处:
(1).flexDirection: React Native中默认为flexDirection:‘column’,在Web CSS中默认为flex-direction:‘row’
(2).alignItems: React Native中默认为alignItems:‘stretch’,在Web CSS中默认align-items:‘flex-start’
(3).flex: 相比Web CSS的flex接受多参数,如:flex: 2 2 10%;,但在 React Native中flex只接受一个参数
(4).不支持属性:align-content,flex-basis,order,flex-basis,flex-flow,flex-grow,flex-shrink
2. alignItems: 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐,默认为stretch
属性值: flex-start 元素向侧轴起点对齐。
flex-end 元素向侧轴终点对齐。
center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器,那么在两个方向上溢出距离相同。
stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
baseline: 项目位于容器的基线上。
initial: 设置该属性为它的默认值。
inherit: 从父元素继承该属性。
3. justifyContent容器属性: 属性定义了浏览器如何分配顺着父容器主轴的弹性(flex)元素之间及其周围的空间,默认为flex-start。
属性值: flex-start(default) 从行首开始