在學習彈性盒子模型的時候,有幾個屬性常常讓同學們感覺頭痛, 不知到最後得到的效果數值到底是怎樣計算得來的,那麽不要慌,穩住,我們能贏 !!!
今天就讓我們先來看看flex-grow這個屬性

flex-grow
定義項目的放大比例，默認值為0，就算存在剩余空間，也不會放大。下面的例子中沒有定義該屬性，是不會擁有分配剩余空間的權利的。

<div class="box">

 <span class="item">1</span>
 <span class="item">2</span>
 <span class="item">3</span>
 

</div>
.box{

 width:400px;
 border:1px solid deepskyblue;

 /*聲明一個彈性盒子模型*/
 display: flex;

}
.item{

 width:100px;
 height:100px;
 background: cyan;
 border:1px solid deepskyblue;

 /*放大比例*/
 flex-grow: 0; /*默認0 不放大*/

}

當項目1,2,3的flex-grow比例改變為:

.item:nth-child(1){

flex-grow: 0;

}
.item:nth-child(2){

flex-grow: 1;
 

}
.item:nth-child(3){

flex-grow: 2;

}

效果為:

   
計算過程如下(在此我們忽略變寬的大小,以便於計算):

整個box的寬度400px減去項目1+2+3原始寬度100px之和,得出答案400-(100+100+100)=100像素,

例子中項目1不放大,項目2,3的放大比例分別為1,2,那麽剩余空間分為3分,項目2à1份,項目3à2分,比例就為1:2,分配出來的值就為項目1:100/3*1=33.33px,

項目2: 100/3*2=66.66px,那麽這個時候剩余空間就被計算出來了,相加後的結構就為項目1:133.33px002E項目2:166.66px

項目1的計算公式: 100 + (100 / 3) * 1
項目2的計算公式: 100 + (100 / 3) * 2

 那麽flex-grow這個屬性在我們使用彈性布局的時候是非常常見的,所以大家要予以重視.
 怎麽樣,現在大家對於flex-grow是如何分配剩余空間的問題是不是就很清晰了呢^-^.

上海尚學堂web前端培訓原創，請多多關註，陸續有web前端相關技術文章奉獻。

彈性盒子模型屬性之flex-grow