Flexbox布局的正確使用姿勢

GitCafe 發(fā)布于2019-08-29 12:50 / 748人閱讀

摘要：分配空間原理影響布局分配空間的屬性有三個(gè)，分別是和。伸縮項(xiàng)目擴(kuò)展寬度項(xiàng)目容器寬度項(xiàng)目寬度或項(xiàng)目設(shè)置的總和對應(yīng)的比例拉伸后伸縮項(xiàng)目寬度原伸縮項(xiàng)目寬度擴(kuò)展寬度我們來計(jì)算一下上面栗子中第一個(gè)伸縮項(xiàng)目拉伸后的寬度。

在項(xiàng)目中，我們還會(huì)大量使用到flexbox的新舊屬性，但大多數(shù)人一般只會(huì)寫新屬性，舊屬性交由autoprefixer處理，但其實(shí)完成同樣功能的新舊屬性表現(xiàn)形式卻不盡相同。還有部分人只使用“萬能”的flex:number屬性為伸縮項(xiàng)目分配空間，但有些特殊情景卻無法滿足，此文為此梳理了flexbox的新舊屬性區(qū)別和分配空間的原理，為大家用flexbox布局的項(xiàng)目通通渠。

Flexbox兼容性

PC端的兼容性

移動(dòng)端的兼容性

如上圖，為了兼容IE10-11和Android4.3-，UC，我們?nèi)孕枰褂肍lexbox的舊屬性。

Flexbox新舊屬性

Flexbox的新屬性提供了很多舊版本沒有的功能，但是目前Android4.x和UC仍有一定市場占有率需要兼容，因此目前只使用新舊屬性都有的功能。
能實(shí)現(xiàn)相同功能的Flexbox新舊屬性如下表：

但想象是美好的，現(xiàn)實(shí)是殘酷的，新舊屬性里有那么幾個(gè)頑固分子并不能乖乖的表現(xiàn)的一樣，總有那么一點(diǎn)不同。
下面我們來看看是哪些新舊屬性有不同：

flex-direction:row-reverse vs box-orient:horizontal;box-direction:reverse

相同點(diǎn)：改變主軸方向和伸縮項(xiàng)目的排列順序；在ltr下伸縮項(xiàng)目從右到左排列。
不同點(diǎn)：

flex-direction:row-reverse：第一個(gè)伸縮項(xiàng)目向主軸起點(diǎn)對齊

box-orient:horizontal;box-direction:reverse：最后一個(gè)伸縮項(xiàng)目向主軸終點(diǎn)對齊

flex-direction:column-reverse vs box-orient:vertical;box-direction:reverse

相同點(diǎn)：改變主軸方向和伸縮項(xiàng)目的排列順序；在ltr下伸縮項(xiàng)目從下到上排列。
不同點(diǎn)：
flex-direction:column-reverse：第一個(gè)伸縮項(xiàng)目向主軸起點(diǎn)對齊。

box-orient:vertical;box-direction:reverse：最后一個(gè)伸縮項(xiàng)目向主軸終點(diǎn)對齊。

oreder:integer vs box-ordinal-group:integer

相同點(diǎn)：定義伸縮項(xiàng)目顯示順序。
不同點(diǎn)：
oreder:integer：默認(rèn)值為0；可以為負(fù)值。
box-ordinal-group:integer：默認(rèn)值為1；取值大于1。

flex-grow:number vs box-flex:number

相同點(diǎn)：定義伸縮項(xiàng)目的擴(kuò)展因素。
不同點(diǎn)：box-flex:number同時(shí)定義了伸縮項(xiàng)目的縮小因素。

flex-shrink:number vs box-flex:number

相同點(diǎn)：定義伸縮項(xiàng)目的縮小因素。
不同點(diǎn)：box-flex:number同時(shí)定義了伸縮項(xiàng)目的擴(kuò)展因素。

Flexbox分配空間原理

影響Flexbox布局分配空間的屬性有三個(gè)，分別是flex-grow、flex-shrink和flex-basis。

flex-grow：當(dāng)伸縮項(xiàng)目在主軸方向的總寬度 < 伸縮容器，伸縮項(xiàng)目根據(jù)擴(kuò)展因素分配伸縮容器的剩余空間。

flex-shrink：當(dāng)伸縮項(xiàng)目在主軸方向的總寬度 > 伸縮容器，伸縮項(xiàng)目根據(jù)縮小因素分配總寬度超出伸縮容器的空間。

flex-basis：伸縮基礎(chǔ)，在進(jìn)行計(jì)算剩余空間或超出空間前，給伸縮項(xiàng)目重新設(shè)置一個(gè)寬度，然后再計(jì)算。

我們先來看看如何計(jì)算計(jì)算拉伸后的伸縮項(xiàng)目寬度，先簡單明了的給個(gè)公式，再通過栗子來驗(yàn)證。

伸縮項(xiàng)目擴(kuò)展寬度 = (項(xiàng)目容器寬度 - 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和) * 對應(yīng)的flex-grow比例
拉伸后伸縮項(xiàng)目寬度 = 原伸縮項(xiàng)目寬度 + 擴(kuò)展寬度

.flexbox-wrap{
    width:550px;
    display: flex;
}
.flexbox-item{
    &:nth-child(1){
        width:60px;
    }
    &:nth-child(2){
        width:70px;
    }
    &:nth-child(3){
        flex-basis:80px;
    }
    &:nth-child(4){
        flex-basis:90px;
    }
    &:nth-child(5){
         flex-basis:100px;
    }
}
@for $i from 1 through 5 {
    .flexbox-item:nth-child(#{$i}){
        flex-grow: $i;
        background-color: rgba(35 * (6-$i), 20 * $i, 35 * $i,1);
    }
}

我們來計(jì)算一下上面栗子中第一個(gè)伸縮項(xiàng)目拉伸后的寬度。
對應(yīng)著公式一步步計(jì)算：

// 項(xiàng)目容器寬度
container = 550
// 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
itemSum = 60 + 70 + 80 + 90 + 100 = 400
// 第一個(gè)伸縮項(xiàng)目對應(yīng)的flex-grow比例
flexRatio = 1 / ( 1 + 2 + 3 + 4 + 5 ) = 1/15
// 第一個(gè)伸縮項(xiàng)目擴(kuò)展寬度
extendWidth = ( 550 - 400 ) * 1/15 = 10
// 第一個(gè)伸縮項(xiàng)目拉伸后的寬度
itemWidth = 60 + 10 = 70

計(jì)算后得到第一個(gè)伸縮項(xiàng)目拉伸后的寬度是70px，我們通過chrome上的盒子模型來看看是否正確

chrome計(jì)算的結(jié)果和我們計(jì)算的結(jié)果是一致的。

根據(jù)拉伸的計(jì)算公式是不是很容易就能推演出壓縮的計(jì)算公式呢？

伸縮項(xiàng)目縮小寬度 = (項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和 - 項(xiàng)目容器寬度) * 對應(yīng)的flex-shrink比例

壓縮后伸縮項(xiàng)目寬度 = 原伸縮項(xiàng)目寬度 - 縮小寬度

繼續(xù)用個(gè)栗子來驗(yàn)證公式是否正確

.flexbox-wrap{
    width:250px;
    display: flex;
}
.flexbox-item{
    &:nth-child(1){
        width:60px;
    }
    &:nth-child(2){
        width:70px;
    }
    &:nth-child(3){
        flex-basis:80px;
    }
    &:nth-child(4){
        flex-basis:90px;
    }
    &:nth-child(5){
         flex-basis:100px;
    }
}
@for $i from 1 through 5 {
    .flexbox-item:nth-child(#{$i}){
        flex-shrink: $i;
        background-color: rgba(35 * (6-$i), 20 * $i, 35 * $i,1);
    }
}

我們來計(jì)算一下上面栗子中第一個(gè)伸縮項(xiàng)目壓縮后的寬度。
對應(yīng)著公式一步步計(jì)算：

// 項(xiàng)目容器寬度
container = 250
// 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
itemSum = 60 + 70 + 80 + 90 + 100 = 400
// 第一個(gè)伸縮項(xiàng)目對應(yīng)的flex-shrink比例
flexRatio = 1 / ( 1 + 2 + 3 + 4 + 5 ) = 1/15
// 第一個(gè)伸縮項(xiàng)目縮小寬度
extendWidth = ( 400 - 250 ) * 1/15 = 10
// 第一個(gè)伸縮項(xiàng)目壓縮后的寬度
itemWidth = 60 - 10 = 50

計(jì)算后得到第一個(gè)伸縮項(xiàng)目壓縮后的寬度是50px，我們通過chrome上的盒子模型來看看是否正確

chrome計(jì)算的結(jié)果和我們計(jì)算的結(jié)果不一樣。

伸縮項(xiàng)目壓縮的計(jì)算方式和拉伸的不一樣，是因?yàn)閴嚎s會(huì)有極端情況，我們把第一個(gè)伸縮項(xiàng)目的flex-shrink修改為10，此時(shí)縮小寬度為( 400 - 250 ) * ( 10 / 24) = 62.5，縮小的寬度比原寬度要大，計(jì)算的壓縮后的寬度變成了負(fù)數(shù)。

為了避免這種極端情況，計(jì)算縮小比例是要考慮伸縮項(xiàng)目的原寬度。

正確的公式是這樣的

伸縮項(xiàng)目縮小寬度 = (項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和 - 項(xiàng)目容器寬度)  (對應(yīng)的flex-shrink  項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis比例)
壓縮后伸縮項(xiàng)目寬度 = 原伸縮項(xiàng)目寬度 - 縮小寬度

對應(yīng)著公式一步步計(jì)算：

// 項(xiàng)目容器寬度
container = 250
// 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
itemSum = 60 + 70 + 80 + 90 + 100 = 400
// 第一個(gè)伸縮項(xiàng)目對應(yīng)的flex-shrink比例
flexRatio = (1*60) / (1*60+2*70+3*80+4*90+5*100) = 6/130
// 第一個(gè)伸縮項(xiàng)目縮小寬度
extendWidth = ( 400 - 250 ) * 6/130 ≈ 6.922
// 第一個(gè)伸縮項(xiàng)目壓縮后的寬度
itemWidth = 60 - 6.922 = 53.078

計(jì)算后得到第一個(gè)伸縮項(xiàng)目壓縮后的寬度是53.078px，和chrome上的盒子模型是一樣的。

Flexbox屬性縮寫陷阱

上面介紹的flex-grow、flex-shrink和flex-basis有一個(gè)縮寫的寫法flex。

flex: flex-grow [flex-shrink] [flex-basis]

flex各種縮寫的值

flex: initial == flex: 0 1 auto

flex: none == flex: 0 0 auto

flex: auto == flex: 1 1 auto

flex: number == flex: number 1 0%

在實(shí)際項(xiàng)目中，會(huì)直接寫使用縮寫的flex來給伸縮項(xiàng)目分配空間，但是使用縮寫屬性會(huì)留下一些陷阱，導(dǎo)致表現(xiàn)的結(jié)果不盡如人意。

分別使用flex和flex-grow來把伸縮項(xiàng)目拉伸填滿容器，看看表現(xiàn)的差異。

首先看看使用flex-grow拉伸伸縮項(xiàng)目的效果

.flexbox-wrap{
    width:550px;
    display: flex;
}
.flexbox-item{
    flex-grow:1;
    &:nth-child(1){
        width:60px;
    }
    &:nth-child(2){
        width:70px;
    }
    &:nth-child(3){
        width:80px;
    }
    &:nth-child(4){
        width:90px;
    }
    &:nth-child(5){
         width:100px;
    }
}
@for $i from 1 through 5 {
    .flexbox-item:nth-child(#{$i}){
        background-color: rgba(35 * (6-$i), 20 * $i, 35 * $i,1);
    }
}

每個(gè)伸縮項(xiàng)目在原寬度上拉伸相同的寬度

通過上面的計(jì)算拉伸后的伸縮項(xiàng)目寬度，可以計(jì)算第一個(gè)伸縮項(xiàng)目拉伸后的寬度

// 項(xiàng)目容器寬度
container = 550
// 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
itemSum = 60 + 70 + 80 + 90 + 100 = 400
// 第一個(gè)伸縮項(xiàng)目對應(yīng)的flex-grow比例
flexRatio = 1 / ( 1 + 1 + 1 + 1 + 1 ) = 1/5
// 第一個(gè)伸縮項(xiàng)目擴(kuò)展寬度
extendWidth = ( 550 - 400 ) * 1/5 = 30
// 第一個(gè)伸縮項(xiàng)目拉伸后的寬度
itemWidth = 60 + 30 = 90

然后我們把flex-grow:1替換成flex:1，下面是表現(xiàn)的效果，伸縮項(xiàng)目拉伸后的寬度變成一樣了。

從chrome的盒子模型可看到伸縮項(xiàng)目拉伸后寬度變成了110px，伸縮容器等分了容器的寬度。

flex:1展開后是flex:1 1 0%，flex-grow:1相當(dāng)于flex:1 1 auto，兩者的區(qū)別在于flex-basis的值不同。flex:1為項(xiàng)目寬度重新設(shè)置了寬度為0，所以可分配空間為整個(gè)容器，從公式計(jì)算上可以更直觀理解：

// 項(xiàng)目容器寬度
container = 550
// 項(xiàng)目寬度或項(xiàng)目設(shè)置的flex-basis總和
itemSum = 0 + 0 + 0 + 0 + 0 = 0
// 第一個(gè)伸縮項(xiàng)目對應(yīng)的flex-grow比例
flexRatio = 1 / ( 1 + 1 + 1 + 1 + 1 ) = 1/5
// 第一個(gè)伸縮項(xiàng)目擴(kuò)展寬度
extendWidth = ( 550 - 0 ) * 1/5 = 110
// 第一個(gè)伸縮項(xiàng)目拉伸后的寬度
itemWidth = 0 + 110 = 110

需要注意的Flexbox特性 無效屬性

column-*在伸縮容器無效

float和clear在伸縮項(xiàng)目無效

vertical-align在伸縮項(xiàng)目無效

::first-line and ::first-letter在伸縮容器無效

伸縮容器中的非空字符文本節(jié)點(diǎn)也是伸縮項(xiàng)目


    1
    2
    我是個(gè)假文本
    3
    4
    5

margin折疊

伸縮容器和伸縮項(xiàng)目的margin不會(huì)折疊

伸縮項(xiàng)目間的margin不會(huì)折疊

舊版Flexbox的BUG

伸縮項(xiàng)目為行內(nèi)元素要加display:block;或display:flex

歡迎關(guān)注：Leechikit
原文鏈接：segmentfault.com
到此本文結(jié)束，歡迎提問和指正。
寫原創(chuàng)文章不易，若本文對你有幫助，請點(diǎn)贊、推薦和關(guān)注作者支持。

云服務(wù)器 GPU云服務(wù)器正確姿勢域名的正確格式正確的404配置 html正確的是

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112178.html

發(fā)表評論

登陸后可評論

0條評論

GitCafe

男|高級講師

我要關(guān)注我要私信

TA的文章

#圣誕節(jié)#SugarHosts：美國/香港虛擬主機(jī)低至6折，云服務(wù)器每續(xù)費(fèi)一年送半年

閱讀 2142·2021-11-24 10:28
【C語言進(jìn)階】??浮點(diǎn)數(shù)在內(nèi)存中的存儲(chǔ)（IEEE754標(biāo)準(zhǔn)）

閱讀 1172·2021-10-12 10:12
云主機(jī)怎么解析域名-云主機(jī)怎么綁定域名呢？

閱讀 3380·2021-09-22 15:21
#大硬盤#Servarica：2核/3G/2T HDD/100Mbps不限流量/加拿大/年付$72，

閱讀 709·2021-08-30 09:44
阿里云、騰訊云、UCloud年付百元機(jī)（上海機(jī)房1核2G內(nèi)存1Mbps帶寬云服務(wù)器）性能對比測評

閱讀 1942·2021-07-23 11:20
功能性組件和Classes有什么不同？

閱讀 1177·2019-08-30 15:56
瀏覽器滾動(dòng)條優(yōu)化

閱讀 1796·2019-08-30 15:44
HTML和CSS 入門系列（一）：超鏈接、選擇器、顏色、盒模式、DIV布局、圖片

閱讀 1510·2019-08-30 13:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Flexbox布局的正確使用姿勢

相關(guān)文章

小技巧 - 收藏集 - 掘金

Android開源架構(gòu)

css進(jìn)階

發(fā)表評論

0條評論

GitCafe

男|高級講師

TA的文章

#圣誕節(jié)#SugarHosts：美國/香港虛擬主機(jī)低至6折，云服務(wù)器每續(xù)費(fèi)一年送半年

【C語言進(jìn)階】??浮點(diǎn)數(shù)在內(nèi)存中的存儲(chǔ)（IEEE754標(biāo)準(zhǔn)）

云主機(jī)怎么解析域名-云主機(jī)怎么綁定域名呢？

#大硬盤#Servarica：2核/3G/2T HDD/100Mbps不限流量/加拿大/年付$72，

阿里云、騰訊云、UCloud年付百元機(jī)（上海機(jī)房1核2G內(nèi)存1Mbps帶寬云服務(wù)器）性能對比測評

功能性組件和Classes有什么不同？

瀏覽器滾動(dòng)條優(yōu)化

HTML和CSS 入門系列（一）：超鏈接、選擇器、顏色、盒模式、DIV布局、圖片

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Flexbox布局的正確使用姿勢

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！