zIndex层叠顺序:值越大 越靠前。
marginHorizontal === marginLeft and marginRight. marginVertical ===
marginTop and marginBottom.padding同上。
top值是指将本组件定位到:距离顶部多少个逻辑像素(顶部的定义取决于position属性)。
right值是指将本组件定位到距离右边多少个逻辑像素(右边的定义取决于position属性)。
position enum(‘absolute’, ‘relative’)
默认情况下所有组件都是相对的,故所有的定位都是相对于它父组件的。
justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
alignSelf enum(‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
alignSelf决定了元素在父元素的次轴方向的排列方式(此样式设置在子元素上),其值会覆盖父元素的alignItems的值。其表现和CSS上的align-self一致(默认值为auto)。
alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
alignItems决定了子元素在次轴方向的排列方式(此样式设置在父元素上)。例如若子元素本来是沿着竖直方向排列的(即主轴竖直,次轴水平),则alignItems决定了它们在水平方向的排列方式。此样式和CSS中的align-items表现一致,默认值为stretch。
flex布局和position定位不能共用
flex
在React Native中flex的表现和CSS有些区别。 flex在RN中只能为整数值。
flex为正整数时,它使组件变得灵活,它的大小与它的伸缩值成比例。因此,Flex设置为2的组件将需要两倍的空间作为一个组件与Flex设置为1。当Flex为0,该组件是根据宽度和高度大小,它是不灵活的。
当Flex是- 1,该组件通常大小根据宽度和高度。然而,如果没有足够的空间,该组件将收缩其minwidth和minheight。
flexgrow,flexshrink,和flexbasis工作相同的CSS。
CSS中flex中取值
第一种情况flex属性不写
flex属性默认是0 1 auto
flex-grow为0,则存在剩余空间也不放大
flex-shrink为1,则空间不足该项目缩小
flex-basis为auto,则该项目本来的大小
flex:1相当于
flex-grow为1
flex-shrink为1
flex-basis为0%
flex常用取值分析原文链接
flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况:
auto:首先检索该子元素的主尺寸,如果主尺寸不为 auto,则使用值采取主尺寸之值;如果也是 auto,则使用值为 content。
content:指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值,等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为 auto 一样。
举一个不同的值之间的区别:
<div class="parent">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
</div>
<style type="text/css">
.parent {
display: flex;
width: 600px;
}
.parent > div {
height: 100px;
}
.item-1 {
width: 140px;
flex: 2 1 0%;
background: blue;
}
.item-2 {
width: 100px;
flex: 2 1 auto;
background: darkblue;
}
.item-3 {
flex: 1 1 200px;
background: lightblue;
}
</style>
主轴上父容器总尺寸为 600px 子元素的总基准值是:0% + auto + 200px = 300px,其中
- 0% 即 0 宽度
- auto 对应取主尺寸即 100px 故剩余空间为 600px - 300px = 300px 伸缩放大系数之和为: 2 + 2 + 1 = 5 剩余空间分配如下:
- item-1 和 item-2 各分配 2/5,各得 120px
- item-3 分配 1/5,得 60px 各项目最终宽度为:
- item-1 = 0% + 120px = 120px
- item-2 = auto + 120px = 220px
- item-3 = 200px + 60px = 260px 当 item-1 基准值取 0% 的时候,是把该项目视为零尺寸的,故即便声明其尺寸为 140px,也并没有什么用,形同虚设 而 item-2 基准值取 auto
的时候,根据规则基准值使用值是主尺寸值即 100px,故这 100px 不会纳入剩余空间
CSS3 box-flex 属性
box-flex 属性
定义两个可伸缩的 p 元素。如果父元素的总宽度是 300 像素,则 #p1 的宽度是 100 像素,而 #p2 的宽度是 200 像素:
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */
box-flex:1.0;
border:1px solid red;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari 和 Chrome */
box-flex:2.0;
border:1px solid blue;
}
浏览器支持
目前没有浏览器支持 box-flex 属性。
Firefox 支持替代的 -moz-box-flex 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。