弹性盒(Flexbox)和样式

官网原文

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 属性。