如何控制Flex子元素在主軸上的比例？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
魯山網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)于2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。
一、基本概念
1.1 主軸(Main axis)
定義了flex元素布局起始點(diǎn)和方向，flex子元素在主軸上依次放置。
主軸有4個(gè)方向，通過(guò)flex-direction指定：
row
水平方向，從左到右，默認(rèn)的
row-reverse
水平方向，從右到左
column
垂直方向，從上到下
column-reverse
垂直方向，從下到上
1.2 主軸的尺寸（Main axis size）
就是flex容器content矩形（不包含padding, border, margin區(qū)域）在主軸方向的尺寸。
1.3 交叉軸（Cross axis）
交叉軸就是跟主軸錘子的方向，主要用于flex元素的對(duì)齊。
1.4 交叉軸的尺寸（Cross axis size）
就是flex容器content矩形（不包含padding, border, margin區(qū)域）在Cross軸方向的尺寸。
1.5 flex盒模型（flex box）
display為flex，inline-flex，的元素，也叫flex容器。
1. flex容器包含的不僅是flex元素，也包含空白空間。
2. 涉及的CSSflex-directionflex-wrapflex-flow
flex-direction
flex-wrap
flex-flow
flex-direction和 flex-wrap的簡(jiǎn)寫(xiě)。
justify-content
控制flex容器內(nèi)容（flex元素和空白空間）在主軸方向?qū)R。注意區(qū)分align-items。
align-content
控制多行flex容器個(gè)行的對(duì)齊方式。
align-items
控制flex容器內(nèi)容（flex元素和空白空間）在交叉軸方向?qū)R。
Tip：
1、這些CSS屬性都是有相關(guān)性的：
首頁(yè)先指定flex容器的主軸方向(flex-direction), 如果flex子元素超過(guò)在主軸 尺寸，那就涉及是否換行（flex-wrap）。如果沒(méi)有超過(guò)主軸尺寸，那就涉及行內(nèi)對(duì)齊（justify-content）, 如果存在多行每個(gè)行直接也要對(duì)齊（align-content）。
2、可能比較容易混淆 justify-content，align-content，align-items。
記住content是指flex元素和空白空間，items指的是flex元素。這樣就容易就是這三個(gè)屬性的用處了。
1.6 flex元素(flex items)
1. 語(yǔ)法
flex box的子元素，不包含流外子元素（ absolute, fix元素），但是包含float元素。
flex子元素相鄰的margin不會(huì)發(fā)生合并。
float元素作為flex子元素時(shí)，float屬性無(wú)效（因?yàn)橐獏⑴cflex布局，不是流式布局）。
2. 涉及CSS屬性
flex-basis
指定flex元素在主軸方向上占用flex容器的尺寸，默認(rèn)為auto，即以flex元素的尺寸作為其占用的尺寸（主軸是row取值flex元素的寬度，主軸是column取值flex元素的高度），根據(jù)該屬性計(jì)算是否有空余空間。
注意：flex元素占用的尺寸跟flex-basis有關(guān)，跟元素的寬高沒(méi)直接關(guān)系。
flex-grow
指定各個(gè)flex元素彈性增長(zhǎng)因數(shù)，即占用正空白空間（positive free space）的比例份額數(shù)量。0值（默認(rèn)值）表示不占用空白空間
flex-shrink
指定各個(gè)flex元素彈性收縮因數(shù)，即分配負(fù)空白空間（negative free space）的比例份額數(shù)量。但是元素不能無(wú)限收縮為0，也不能小于元素的最小尺寸（如min-width或者min-height）。
flex
flex-grow flex-shrink flex-basis簡(jiǎn)寫(xiě)
align-self
調(diào)整自己在交叉軸的對(duì)齊方式，只有在不撐滿交叉軸時(shí)，這個(gè)屬性才有效。
order
指定順序
二、計(jì)算自由空間和flex-basis
flex子元素在主軸上的比例依賴這三個(gè)CSS屬性：
flex-basis
flex-grow
flex-shrink
其中：
flex-basis + flex-grow組合控制著伸
flex-basis + flex-shrink組合控制著縮
所以要確定flex子元素在主軸上的比例，首先要確定使用哪種組合。
2.1 規(guī)則
flex-basis 屬性指定在任何空間分配發(fā)生之前初始化flex子元素的尺寸，更確切的說(shuō)flex-basis 屬性指的flex子元素盒模型（box-sizing）的尺寸，所以跟flex子元素width（height）取值邏輯類似，如果box-sizing=content，則flex-basis也不包含padding和border區(qū)域。
2.2 剩余自由空間計(jì)算
自由空間計(jì)算
flex容器在主軸方向的content矩形的尺寸
期望自用空間
在計(jì)算flex容器的自由空間前要先統(tǒng)計(jì)flex子元素占用的尺寸，注意這里指的是flex子元素的margin區(qū)域的尺寸，并且相鄰的flex子元素margin是不會(huì)發(fā)生合并的。
剩余自由空間計(jì)算 = 自由空間計(jì)算 - 期望自用空間
正自由空間
正值的剩余自由空間，此時(shí)采用flex-basis + flex-grow組合。
負(fù)自由空間
負(fù)正值的剩余自由空間，此時(shí)采用flex-basis + flex-shrink組合。
三、深入了解flex-grow
3.1 規(guī)則
如果存在正自由空間（positive free space），則采用flex-basis + flex-grow組合計(jì)算flex子元素在主軸上的比例。把正自由空間比作蛋糕的話，flex-grow表示希望分得蛋糕的量：
flex-grow: 0.2 表示希望獲得20%的蛋糕；
flex-grow: 1 表示希望獲得100%整個(gè)蛋糕（有點(diǎn)過(guò)分啊，不考慮其他兄弟）；
flex-grow: 2 表示希望獲得200%的蛋糕（這是明搶啊，態(tài)度很明確）。
但畢竟蛋糕就一個(gè)，flex容器盡量滿足felx子元素的要求，采用一種簡(jiǎn)單的按照比例分蛋糕方式：
累加flex子元素的flex-grow得出總和，簡(jiǎn)稱SUM_flex_grow；
如果SUM_flex_grow=0，則不發(fā)生彈性增長(zhǎng)，結(jié)束；
flex子元素增長(zhǎng)的尺寸 = 正自由空間尺寸 * flex_grow / Max(SUM_flex_grow, 1)。
3.2 Demo1：按照比例分蛋糕
重慶分公司
重慶分公司
function demo1() {
return (
<>
One 
解析：
計(jì)算剩余自由空間
flex容器主軸尺寸 = 600px
元素one的希望尺寸 = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
元素two的希望尺寸 = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
剩余自由空間 = 600px - 150px - 190px = 260px，即存在正剩余空間。
計(jì)算各個(gè)flex子元素增長(zhǎng)尺寸
SUM_flex_grow = 1 + 2 = 3，即大于1 ，一個(gè)蛋糕不夠分，只能按照比例分了。
元素one的實(shí)際增長(zhǎng)尺寸 = 260px * 1 / Max(1, 1 + 2) = 260px * 1 / (1 + 2) = 86.67px
元素two的實(shí)際增長(zhǎng)尺寸 = 260px * 2 / Max(1, 1 + 2) = 260px * 2 / (1 + 2) = 173.33px
3.3 Demo2：SUM(flex-grow) < 1
function demo3() {
return (
<>
One
Two
{`
.flex {
display: flex;
width: 600px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
}
`}
)
} 
解析：
計(jì)算剩余自由空間
flex容器主軸尺寸 = 600px
元素one的希望尺寸 = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
元素two的希望尺寸 = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
剩余自由空間 = 600px - 150px - 190px = 260px，即存在正剩余空間。
計(jì)算各個(gè)flex子元素增長(zhǎng)尺寸
SUM_flex_grow = 0.2 + 0.3 = 0.5，即小于1 ，一個(gè)蛋糕能滿足大家需求，直接分給各個(gè)flex子元素。
元素one的實(shí)際增長(zhǎng)尺寸 = 260px * 0.2 / Max(1, 0.5) = 260px * 0.2 = 52px
元素two的實(shí)際增長(zhǎng)尺寸 = 260px * 0.3 / Max(1, 0.5) = 260px * 0.3 = 78px
注意：
如果SUM(flex-grow)小于1，此時(shí)剩余空間沒(méi)有全部分配給各個(gè)flex子元素。
3.3 Demo3 跟max-width沖突
留意該栗子中：
元素one, two, threebox-sizing=border-box
元素one的max-width=150px
function demo4() {
return (
<>
One
Two
Three
{`
.flex {
display: flex;
width: 800px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
box-sizing: border-box;
}
`}
)
} 
解析：
計(jì)算剩余自由空間
flex容器主軸尺寸 = 800px
元素one的希望尺寸 = 100px(flex-basis) + 10px(margin-right) = 110px
box-sizing=border-box
元素two的希望尺寸 = 150px(flex-basis) = 150px
box-sizing=border-box
元素three的希望尺寸 = 150px(flex-basis) = 150px
box-sizing=border-box
剩余自由空間 = 800px - 110px - 150px - 150px = 390px，即存在正剩余空間。
計(jì)算各個(gè)flex子元素增長(zhǎng)尺寸
SUM_flex_grow = 1 + 2 + 3 = 6，即大于1 ，一個(gè)蛋糕不夠分，只能按照比例分了。。
元素one的增長(zhǎng)尺寸 = 390px * 1 / Max(1, 6) = 390px * 1/6 =65px
這樣元素one的尺寸就是100px + 65px = 165px，大于其max-width=150px指定的最大值，所以最終元素one的尺寸是150px。即元素one吃不完分配的蛋糕，把吃不完的蛋糕還回去了，讓其他兄弟多分些（先拋個(gè)問(wèn)題：這些吃不完的蛋糕如何分配呢？）。
元素two和元素three重新分配剩下是自由剩余空間，即回到步驟1重新計(jì)算。
flex容器主軸尺寸 =800px - 元素one占領(lǐng)的尺寸（150px - 10px） = 640px
剩余空間 = 640px - 150px - 150px = 340px
SUM_flex_grow = 2 + 3 = 5
元素two的增長(zhǎng)尺寸 = 340px * 2 / Max(1, 5) = 340px * 2 / 5 = 136px
元素three的增長(zhǎng)尺寸 = 340px * 3 / Max(1, 5) = 340px * 3 / 5 = 204px
3.4 小結(jié)：
計(jì)算剩余自由空間永遠(yuǎn)是第一步；
增長(zhǎng)是個(gè)絕對(duì)值，即flex子元素會(huì)增加個(gè)絕對(duì)值（這是跟flex-shrink不同的地方）；
當(dāng)遇到max-屬性沖突時(shí)，即元素one吃不完的蛋糕會(huì)放入總蛋糕中，由后面的flex子元素重新分配。
四、深入了解flex-shrink
4.1 規(guī)則
如果存在負(fù)自由空間（negative free space），則采用flex-basis + flex-shrink組合計(jì)算Flex子元素在主軸上的比例。flex-shrink取值表達(dá)了個(gè)flex子元素貢獻(xiàn)的愿望：
flex-shrink: 0.2 表示希望分?jǐn)傌?fù)自由空間的20%；
flex-shrink: 1 表示希望分?jǐn)?00%負(fù)自由空間（夠兄弟，其他兄弟不用分?jǐn)偅?/p>
flex-shrink: 2 表示希望分?jǐn)?00%負(fù)自由空間（分?jǐn)偟膽B(tài)度很明確）。
flex容器都感動(dòng)哭了，但為了照顧各個(gè)flex子元素的感受，采用了一個(gè)“更合理”的分?jǐn)傄?guī)則：
計(jì)算flex子元素的content矩形（內(nèi)容矩形）在主軸尺寸 和 flex-shrink乘積值，記作A；
累加步驟1的乘積值，記作SUM_A；
被分?jǐn)偟呢?fù)自由空間 valid_negative_free_space = negative_free_space * Min(1, SUM(flex-shrink))
每個(gè)flex子元素的收縮值 = valid_negative_free_space * A / SUM_A。
計(jì)算的規(guī)則比上面的要復(fù)雜一些，不是簡(jiǎn)單的切分negative-free-space。收縮量不僅依賴flex-shrink,還依賴flex-basis。這樣做只是為了“更合理”，即相同的flex-shrink情況下，flex-basis越小的flex元素收縮的越慢（跟納稅一樣，收入越高交的越多）。
注意： 如果flex-shrink總和小于1，則表示部分負(fù)自由空間被分?jǐn)偭耍从行┏叽鐩](méi)有被收縮）。
4.2 Demo1：“減少貧富差距”
function demo5() {
return (
<>
One
Two
{`
.flex {
display: flex;
width: 300px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
}
`}
)
} 
解析（過(guò)長(zhǎng)跟flex-grow過(guò)程類似）：
計(jì)算剩余自由空間
flex容器主軸尺寸 = 300px
元素one的希望尺寸 = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
元素two的希望尺寸 = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
剩余自由空間 = 300px - 150px - 190px = -40px，即存在負(fù)剩余空間。
被分?jǐn)偟呢?fù)剩余空間 = -40px * Min(1, 1 + 2) = -40px
計(jì)算各個(gè)flex子元素收縮尺寸
SUM_A = 100px * 1 + 150px * 2 = 400px
元素one的實(shí)際收縮尺寸 = 40px * 100px * 1 / 400px= 10px，即最終寬度 = 100px - 10px = 90px
元素two的實(shí)際收縮尺寸 = 40px * 150px * 2 / 400px = 30px，即最終寬度 = 150px - 30px = 120px
4.2 Demo: SUM(flex-shrink) < 1
function demo8() {
return (
<>
One
Two
{`
.flex {
display: flex;
width: 300px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
}
`}
)
} 
flex子元素超出了flex容器。
解析：
計(jì)算剩余自由空間
flex容器主軸尺寸 = 300px
元素one的希望尺寸 = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
元素two的希望尺寸 = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 190px
剩余自由空間 = 300px - 150px - 190px = -40px，即存在負(fù)剩余空間。
有效負(fù)剩余空間 = -40px * Min(1, 0.2 + 0.3) = -40px * 0.5 = -20px
計(jì)算各個(gè)flex子元素收縮尺寸
SUM_A = 100px * 0.2 + 150px * 0.3 = 65px
元素one的實(shí)際收縮尺寸 = 20px * 100px * 0.2 / 65px= 6.15px，即最終寬度 = 100px - 6.15px = 93.85px
元素two的實(shí)際收縮尺寸 = 20px * 150px * 0.3 / 65px= 13.85px，即最終寬度 = 150px - 13.85px = 136.15px
4.4 Demo3: box-sizing =border-box
留意：元素one, twobox-sizing= border-box
function demo6() {
return (
<>
One
Two
{`
.flex {
display: flex;
width: 200px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
box-sizing: border-box;
}
`}
)
} 
解析：
計(jì)算剩余自由空間
flex容器主軸尺寸 = 200px
元素one的希望尺寸 = 100px(flex-basis) + 10px(margin-right) = 110px
元素two的希望尺寸 = 150px(flex-basis) = 150px
剩余自由空間 = 200px - 110px - 150px = -60px，即存在負(fù)剩余空間。
被分?jǐn)偟呢?fù)剩余空間 = -60px * Min(1, 1 + 2) = -60px
計(jì)算各個(gè)flex子元素收縮尺寸
SUM_A = 60px * 1 + 110px * 2 = 280px
注意：此時(shí)不是直接用flex-basis去乘flex-shrink。本質(zhì)上是使用flex子元素的content矩形寬度值去乘flex-shrink。
元素one的實(shí)際收縮尺寸 = 60px * 60px * 1 / 280px = 12.86px，即最終寬度 = 60px - 12.86px = 47.14px（不包含padding,border）
元素two的實(shí)際增長(zhǎng)尺寸 = 60px * 110px * 2 / 280px = 47.14px，即最終寬度 = 110px - 47.14px = 62.86px（不包含padding,border）
4.5 Demo5 跟min-width沖突
留意該栗子中：
元素one的min-width=60px
function demo7() {
return (
<>
One
Two
Three
{`
.flex {
display: flex;
width: 300px;
outline: 1px dashed red;
}
.item {
padding: 10px;
border: 10px solid #666666;
}
`}
)
} 解析：
計(jì)算剩余自由空間
flex容器主軸尺寸 = 300px
元素one的希望尺寸 = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) + 10px(margin-right) = 150px
元素two的希望尺寸 = 150px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right)= 190px
元素three的希望尺寸 = 100px(flex-basis) + 20px(padding-left/right) + 20px(border-left/right) = 140px
剩余自由空間 = 300px - 150px - 190px - 140px = -180px，即存在負(fù)剩余空間。
被分?jǐn)偟呢?fù)剩余空間 = -180px * Min(1, 1 + 2 + 2) = -180px
計(jì)算各個(gè)flex子元素收縮尺寸
SUM_A = 100px * 2 + 150px * 2 + 100px * 1 = 400px
元素one的實(shí)際收縮尺寸 = 180px（負(fù)剩余空間的絕對(duì)值） 100px 2 / 700px = 51.43px，
這樣元素one的尺寸最100px - 51.43px = 48.57px，小于其min-width=60px,即最終寬度為60px。即分配給元素one的稅負(fù)需要由其他兄弟分?jǐn)偭恕?/p>
元素two和元素three重新分配剩下是自由剩余空間，即回到步驟1重新計(jì)算。
flex容器主軸尺寸 = 300px - 元素one占領(lǐng)的尺寸（60px + 20px + 20px + 10px） = 190px
剩余空間 = 190px - 190px - 140px = -140px，即元素two,three要總縮減140px。
SUM_A = 150px * 2 + 100px * 1 = 400px
元素two的收縮尺寸 = 140px * 150 * 2 / 400px = 105px，即最終寬度 = 150px - 105px = 45px
元素three的收縮尺寸 = 140px * 100 / 400px = 35px，即最終寬度 = 100px - 35px = 65px
4.6 小結(jié)
縮減的規(guī)則稍稍復(fù)雜些，這背后是有原因的，主要防止寬度小的元素縮減太快導(dǎo)致為負(fù)寬度。
flex子元素發(fā)生彈性伸縮只是content矩形，其margin,border, padding不會(huì)發(fā)生彈性伸縮的，所以他們也不參與彈性伸縮的計(jì)算公式內(nèi)（如彈性收縮的公式）
當(dāng)遇到min-屬性沖突時(shí)，即元素不能再收縮時(shí)，由后面的flex子元素重新分?jǐn)偸Ｓ嗫臻g。除了min-屬性指定最小尺寸時(shí)，每個(gè)元素都存在最小尺寸的。
看完上述內(nèi)容，你們掌握如何控制Flex子元素在主軸上的比例的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
