css flex

1. 定義

　　flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。

　　flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

　　注意：若是元素不是彈性盒模型對象的子元素，則 flex 屬性不起做用。

2. 語法

　flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

　　- flex-grow

　　指定該項相對於同一容器中其餘靈活項的增加程度。默認值爲0。test

　　

　　

　　- flex-shrink

　　指定該項相對於同一容器中其餘靈活項的收縮程度。默認值爲1。

　　flex環境默認是不換行的，容器長度不夠分配時會壓縮子元素。

　　

 

　　根據文章   深刻理解 flex-grow & flex-shrink & flex-basis 中給出的計算方法，

　　box1壓縮值 = (200*2)  / （200*2 + 160*1） * 60 ≈ 42.86   

　　box1最終寬度 = 200 - 42.86 = 157.14 √

　　box2壓縮值 = （160*1） / (200*2 + 160*1) * 60 ≈ 17.14

　　box2最終寬度 = 160 - 17.14 = 142.86 √

　　兩個值經過文章所說的方法都計算正確，但具體爲何要這樣計算呢，暫時還沒找到比較官方的說明。

　　- flex-basis

　　指定flex容器中子項的初始長度。默認值爲auto。

　　

　　

　　添加右邊樣式後，剩餘長度按1:1分配，即

　　box1寬度：   200 + 40/2 = 220

　　box2寬度： 60 + 40/2 = 80  

3.兼容性

　　

　　詳情查詢 can i use

 

參考：

深刻理解 flex-grow & flex-shrink & flex-basis 

mdn flex