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

接上篇文章，

1. flex-grow屬性

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

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

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

將flex-grow:1 時是:

此時我們將例子變一下

瀏覽器就是

通過上面的動手,我自己總結(jié)出

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

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

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

2. flex-shrink

flex-shrink屬性定義了項(xiàng)目的縮小比例。flex-shrink的默認(rèn)值為1，flex-shrink的值為0時，不縮放。

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

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

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

3. flex-basis

flex-basis屬性定義了項(xiàng)目占據(jù)的主軸空間。瀏覽器根據(jù)這個屬性，計(jì)算主軸多余空間或不足空間的大小。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。

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

然后就是

4. flex

flex是上述三種一起的簡寫方式. 順序?qū)?yīng),felx-grow flex-shrink flex-basis 默認(rèn)flex:0 1 auto; 有兩個個特殊值.

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

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

效果：

挺方便的．

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。