鍍金池/ 問答/HTML5  UI  HTML/ 為什么flex布局直接設(shè)置flex-basis無效，需要這樣寫：flex:0 0

為什么flex布局直接設(shè)置flex-basis無效，需要這樣寫：flex:0 0 156rpx;

最近在做微信小程序項(xiàng)目時(shí)，用到了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; }

請(qǐng)問這是什么原理？

回答
編輯回答
晚風(fēng)眠

flex布局

flex屬性

  1. flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
    建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值
  2. flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
  3. flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
  4. flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。
2017年12月13日 11:45
編輯回答
局外人

第一種無效是因?yàn)闆]有給父容器定義寬度，你加上寬高屬性就可以看到效果了。

第二種有效果是因?yàn)?flex屬性的前兩個(gè)值 0 0 表示 該元素?zé)o論如何都不改變，會(huì)顯示出來 ，但至少父容器也要有高

2017年10月9日 17:04