为什么flex布局直接设置flex-basis无效，需要这样写：flex:0 0 156rpx;

Question

最近在做微信小程序项目时，用到了flex布局，代码如下：

<view class='parent'>
    <view class='child1'></view>
    <view class='child2'></view>
    <view class='child3'></view>
</view>

.parent { display: flex; }
.child1 { flex-basis: 100rpx; }
.child1 { flex-basis: 200rpx; }
.child3 { flex-grow: 1; }

这样不起作用，要改成这样才行：

.child1 { flex: 0 0 100rpx; }
.child2 { flex: 0 0 200rpx; }

请问这是什么原理？

Answer 1

flex布局

flex属性

1. flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
   建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值
2. flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
3. flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
4. flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

Answer 2

第一种无效是因为没有给父容器定义宽度，你加上宽高属性就可以看到效果了。

第二种有效果是因为 flex属性的前两个值 0 0 表示 该元素无论如何都不改变，会显示出来 ，但至少父容器也要有高