在學習彈性盒子模型的時候,有幾個屬性常常讓同學們感覺頭痛, 不知到最後得到的效果數值到底是怎樣計算得來的,那麼不要慌,穩住,我們能贏 !!!
今天就讓我們先來看看flex-grow這個屬性
flex-grow
定義專案的放大比例，預設值為0，就算存在剩餘空間，也不會放大。下面的例子中沒有定義該屬性，是不會擁有分配剩餘空間的權利的。
1
23
.item
.item:nth-child(2)
.item:nth-child(3){
flex-grow: 2;計算過程如下(在此我們忽略變寬的大小,以便於計算):例子中專案1不放大,專案2,3的放大比例分別為1,2,那麼剩餘空間分為3分,專案2à1份,專案3à2分,比例就為1:2,分配出來的值就為專案1:100/3*1=33.33px,專案1的計算公式: 100 + (100 / 3) * 1
專案2的計算公式: 100 + (100 / 3) * 2
那麼flex-grow這個屬性在我們使用彈性布局的時候是非常常見的,所以大家要予以重視.
怎麼樣,現在大家對於flex-grow是如何分配剩餘空間的問題是不是就很清晰了呢^-^.
彈性盒子模型屬性之flex shrink
上一次,我們已經了解過flex grow的具體用法後,這周,讓我們一起來見一下flex basis這個屬性.flex shrink 定義專案的縮小比例，預設值為1，注意前提是空間不足的情況下，專案縮小。值為0,不縮小。下面的例子中沒有定義該屬性，但是滿足容器中空間不足的情況,專案會預設縮小。當專案1...
彈性盒子模型屬性之flex shrink
上一次,我們已經了解過flex grow的具體用法後,這周,讓我們一起來見一下flex basis這個屬性.flex shrink 定義專案的縮小比例，預設值為1，注意前提是空間不足的情況下，專案縮小。值為0,不縮小。下面的例子中沒有定義該屬性，但是滿足容器中空間不足的情況,專案會預設縮小。當專案1...
彈性盒子模型之flex屬性總結
1 技術點 display flex將塊狀元素能在一排顯示 flex需要新增到父元素上 子元素預設從左到右進行排序。2 justify content 設定橫軸的排列方式。justify content flex start flex end center space between space a...