上一次,我們已經了解過flex-grow的具體用法後,這周,讓我們一起來見一下flex-basis這個屬性.flex-shrink
定義專案的縮小比例，預設值為1，注意前提是空間不足的情況下，專案縮小。值為0,不縮小。
下面的例子中沒有定義該屬性，但是滿足容器中空間不足的情況,專案會預設縮小。
當專案1,2,3,4,5的flex-grow比例改變為:
計算過程如下(在此我們忽略邊框的大小,以便於計算):
整個box的寬度400px專案的寬度之和為100+100+100+100+100=500px,超出的空間就為500-400px=100px,那麼例子中專案1不縮小,專案2的縮小比例為1 ,專案3的縮小比例為2,專案4的縮小比例為3,專案5不縮小。那這樣超出的 100px 就要被2, 3, 4 消化掉，比例是1：2：3。那麼我們如何計算呢？
首先是每個專案的wdith值乘以flex-shrink值求積，
2：(100 * 1) = 100
3：(100 * 2) = 200
4：(100 * 3) = 300
然後再求和所有專案的乘積。
(100 + 200 + 300) =600
得到求佔比之後還要乘以要超出的空間。
a：(100 / 600) * 100 = 16.66
b：(200 / 600) * 100 = 33.33
c：(300 / 600) * 100 = 50
得到每一項要減去縮小空間後的剩餘空間
a：(100 – 16.66) = 83.34
b：(100 – 33.33) = 66.67
c：(100 - 50) = 50
好了，這樣就得出計算後的寬度了。
那麼flex-shrink這個屬性在我們使用彈性布局的時候也是非常常見的,而且大部分同學都需要明確具體是怎樣計算出縮小後的值.. （上海尚學堂前端培訓原創）
怎麼樣,現在大家對於flex-shrink是如何計算的問題是不是就很清晰了呢^-^.
上一次,我們已經了解過flex-grow的具體用法後,這周,讓我們一起來見一下flex-basis這個屬性.flex-shrink
定義專案的縮小比例，預設值為1，注意前提是空間不足的情況下，專案縮小。值為0,不縮小。
下面的例子中沒有定義該屬性，但是滿足容器中空間不足的情況,專案會預設縮小。
當專案1,2,3,4,5的flex-grow比例改變為:
計算過程如下(在此我們忽略邊框的大小,以便於計算):
整個box的寬度400px專案的寬度之和為100+100+100+100+100=500px,超出的空間就為500-400px=100px,那麼例子中專案1不縮小,專案2的縮小比例為1 ,專案3的縮小比例為2,專案4的縮小比例為3,專案5不縮小。那這樣超出的 100px 就要被2, 3, 4 消化掉，比例是1：2：3。那麼我們如何計算呢？
首先是每個專案的wdith值乘以flex-shrink值求積，
2：(100 * 1) = 100
3：(100 * 2) = 200
4：(100 * 3) = 300
然後再求和所有專案的乘積。
(100 + 200 + 300) =600
得到求佔比之後還要乘以要超出的空間。
a：(100 / 600) * 100 = 16.66
b：(200 / 600) * 100 = 33.33
c：(300 / 600) * 100 = 50
得到每一項要減去縮小空間後的剩餘空間
a：(100 – 16.66) = 83.34
b：(100 – 33.33) = 66.67
c：(100 - 50) = 50
好了，這樣就得出計算後的寬度了。
那麼flex-shrink這個屬性在我們使用彈性布局的時候也是非常常見的,而且大部分同學都需要明確具體是怎樣計算出縮小後的值.. （上海尚學堂前端培訓原創）
怎麼樣,現在大家對於flex-shrink是如何計算的問題是不是就很清晰了呢^-^.
彈性盒子模型屬性之flex shrink
上一次,我們已經了解過flex grow的具體用法後,這周,讓我們一起來見一下flex basis這個屬性.flex shrink 定義專案的縮小比例，預設值為1，注意前提是空間不足的情況下，專案縮小。值為0,不縮小。下面的例子中沒有定義該屬性，但是滿足容器中空間不足的情況,專案會預設縮小。當專案1...
彈性盒子模型屬性之flex grow
在學習彈性盒子模型的時候,有幾個屬性常常讓同學們感覺頭痛,不知到最後得到的效果數值到底是怎樣計算得來的,那麼不要慌,穩住,我們能贏 今天就讓我們先來看看flex grow這個屬性 flex grow 定義專案的放大比例，預設值為0，就算存在剩餘空間，也不會放大。下面的例子中沒有定義該屬性，是不會擁有...
彈性盒子模型之flex屬性總結
1 技術點 display flex將塊狀元素能在一排顯示 flex需要新增到父元素上 子元素預設從左到右進行排序。2 justify content 設定橫軸的排列方式。justify content flex start flex end center space between space a...