flex布局中的flex-grow,flex-shrink,flex-basis

接上篇文章，

1. flex-grow屬性

flex-grow定義剩余空間的分成。默認為0，即如果存在剩余空間，也不放大。

如何理解這里的剩余空間呢，用例子來說明吧。

默認的情況(flex-grow:0)在瀏覽器下是

將flex-grow:1 時是:

此時我們將例子變一下

瀏覽器就是

通過上面的動手,我自己總結出

• flex-grow會覆蓋你設置的width屬性,使之失效
• 當三個div同時設置相同的非 0 正整數時,即為三個div平分剩余空間.
  • 剩余空間=瀏覽器寬度-item內容寬度之和
  • flex-grow設置為負值時等于0
• 當三個div flex-grow數值不同,則按比例分配剩余空間.當有沒有設置felx-grow,且有width屬性的話,先減去其占有的寬度;
  • 這里有一個誤區就是認為flex-grow:1,flex-grow:2 的寬度時1:2,錯! 是分配的剩余空間1:2

常用:在布局的時候,想讓一個item填滿整行,其余占據其內容寬度就可以了 比如這樣

是不是就不需要使用 float啦,是不是不用清除討厭的浮動啦.嘻嘻

2. flex-shrink

flex-shrink屬性定義了項目的縮小比例。flex-shrink的默認值為1，flex-shrink的值為0時，不縮放。

flex-grow是對剩余空間的分配,而flex-shrink就是對空間不足時怎么安排的設置.

同樣的當空間不足,比如三個div寬度都為200px 父盒子只有400px,那么默認是平均分配這個不足的空間,每個div占據200px(本身)-200px/3(缺的200px平分)=133.333px 基本和flex-grow一致啦.

但是呢有一點不同的就是 在flex-shrink是默認縮小,當然也不會覆蓋你設置的width,所以設置了一個item為固定寬度時,不要想著他不會shrink喔. 和felx-grow差不多啦

3. flex-basis

flex-basis屬性定義了項目占據的主軸空間。瀏覽器根據這個屬性，計算主軸多余空間或不足空間的大小。它的默認值為auto，即項目的本來大小。

感覺上基本和width差不多都是指定item的寬度啊.

然后就是

4. flex

flex是上述三種一起的簡寫方式. 順序對應,felx-grow flex-shrink flex-basis 默認flex:0 1 auto; 有兩個個特殊值.

flex:none;即為flex:0 0 auto
flex:auto;即為 flex:1 1 auto
然后flex為一個正整數時
例如flex:1 即為flex:1 1 0%;
flex為一個長度1px or 百分號1%
例如:flex:0% 即為flex:1 1 %0

我們通常使用flex:1 來使得一個元素,有剩余空間時他擴張,空間過小時他先縮小

效果：

挺方便的．

總結

以上是生活随笔為你收集整理的flex布局_flex布局的 flex（felx-grow、flex-shrink、flex-basis）详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。