15-弹性盒模型
彈性盒模型
彈性盒模型的作用：用來輔助div+css布局，解決傳統(tǒng)布局的繁瑣不便之處并且達(dá)到自適應(yīng)布局模式（也稱之為彈性布局）。
（傳統(tǒng)布局）div+css布局
- 基于盒模型，依賴 display屬性 + position屬性 + float屬性進(jìn)行頁面布局。
- 好處：兼容性比較好
- 壞處：布局比較繁瑣
- 不便：
- 盒子居中，各種居中對(duì)齊
- 大量調(diào)整盒子位置
- 通常div水平顯示設(shè)置float
- 清除浮動(dòng)
- margin重疊問題
css3給我們提出了一套自適應(yīng)的布局模式——彈性布局（彈性盒模型），它用來輔助div+css布局。
什么是彈性盒模型
- 概念：是一種當(dāng)頁面需要自適應(yīng)不同屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)行為的布局模式
- 目的：提供一種更加有效 的方式來針對(duì)一個(gè)容器里面的元素進(jìn)行排列，對(duì)齊和分配空間，就是為了元素在盒子里面面對(duì)盒子的寬度不同時(shí)能更好的適應(yīng)。這種布局模式對(duì)移動(dòng)端更加友好。
彈性盒子結(jié)構(gòu)
彈性盒子是由彈性容器和彈性項(xiàng)目構(gòu)成。
- 彈性容器：包含彈性項(xiàng)目的父元素
- 彈性項(xiàng)目：彈性容器里面的每個(gè)子元素。
- 主軸：彈性項(xiàng)目排列所有軸就稱為主軸。默認(rèn)主軸是水平方向
- 側(cè)軸：與主軸垂直的方向就稱為側(cè)軸。
彈性容器
設(shè)置彈性容器（給父元素設(shè)置）
- display：flex:將盒子變?yōu)閴K級(jí)的彈性容器，對(duì)其他兄弟元素來說，它依然是一個(gè)普通的塊級(jí)標(biāo)簽，對(duì)里面的子元素（彈性項(xiàng)目）來說，這個(gè)盒子是它們的彈性容器。
- display:inline-flex：將盒子變?yōu)樾袃?nèi)塊級(jí)彈性容器，對(duì)其他兄弟標(biāo)簽來說，它是一個(gè)普通的行內(nèi)塊級(jí)元素，對(duì)里面的子元素來說，它是彈性容器。
特點(diǎn)：
- 彈性容器里面的子元素（彈性項(xiàng)目）可以同行顯示，默認(rèn)排列不下時(shí)，按比例將子元素進(jìn)行壓縮
- 彈性容器只對(duì)于直接子元素有效
- 彈性容器對(duì)自己的兄弟標(biāo)簽沒有任何影響
- 對(duì)于彈性容器來說，高度是自適應(yīng)的，無需設(shè)置高度（需要固定高度時(shí)才設(shè)置）
注意
- 彈性容器外面和彈性項(xiàng)目內(nèi)都是正常渲染的，彈性盒子只控制彈性項(xiàng)目如何在彈性容器里面顯示。
彈性項(xiàng)目的排列方式
-
flex-wrap 控制彈性項(xiàng)目是否換行
- flex-wrap：nowrap; 不換行（默認(rèn)值）
- flex-wrap:wrap; 換行
-
flex-direction
控制彈性項(xiàng)目的排列方式，同時(shí)確定彈性容器的主軸。
默認(rèn)是水平方向?yàn)橹鬏S，側(cè)軸是與主軸垂直的軸為側(cè)軸
- row:默認(rèn)值，沿著水平主軸讓元素從左到右的排列
- row-reverse:沿著水平主軸讓元素反向排列
- column:設(shè)置垂直方向?yàn)橹鬏S，元素從上到下排列（改變主軸）
- column-reverse:設(shè)置垂直方向?yàn)橹鬏S，元素反向排列
改變某個(gè)彈性項(xiàng)目的顯示位置
order（給子元素設(shè)置）
-
取值也為數(shù)字，默認(rèn)為0，數(shù)字越大越靠后
-
相同數(shù)字按照代碼結(jié)構(gòu)排列
-
語法：
order:數(shù)字; -
應(yīng)用場(chǎng)景：
- 不改變代碼結(jié)構(gòu)的前提下，可以調(diào)整盒子之間的位置
- 后期可以實(shí)現(xiàn)盒子拖拽功能
富裕空間
- 彈性項(xiàng)目在彈性容器里面排列之后剩余的空間，即彈性容器排除彈性項(xiàng)目之后剩余的空間。
- 主軸富裕空間：justify-content
- 側(cè)軸富裕空間：align-items 所有的彈性項(xiàng)目 align-self 設(shè)置當(dāng)前彈性項(xiàng)目
- 原理：讓彈性項(xiàng)目通過flex-grow去消化富裕空間
分配主軸方向上的富裕空間
justify-content
- flex-start:默認(rèn)值，將主軸方向的富裕空間分配在彈性項(xiàng)目的最后（左對(duì)齊）
- flex-end:將富裕空間分配在主軸的彈性項(xiàng)目最前面（右對(duì)齊）
- center:彈性項(xiàng)目居中
- space-between:首尾緊靠彈性容器，中間彈性項(xiàng)目均分
- space-around:每個(gè)彈性項(xiàng)目兩邊的距離是一樣的。
- space-evenly:每個(gè)彈性項(xiàng)目之間的距離相同，包含第一個(gè)和最后一個(gè)和彈性容器的距離。
分配側(cè)軸方向上的富裕空間
align-items
- flex-strat:默認(rèn)值，彈性項(xiàng)目在側(cè)軸的頂部對(duì)齊
- flex-end:彈性項(xiàng)目在側(cè)軸的底部對(duì)齊
- center:彈性項(xiàng)目在側(cè)軸上居中對(duì)齊
- strech:拉伸，如果彈性項(xiàng)目沒有設(shè)置高度，彈性項(xiàng)目會(huì)將彈性容器撐滿
align-self（給子元素設(shè)置）
- flex-start 上方
- flex-end 下方
- 彈性項(xiàng)目私有align-items的屬性，即單獨(dú)給某個(gè)彈性項(xiàng)目（子元素）設(shè)置側(cè)軸方向上的富裕空間分配。
消化富裕空間
flex-grow（給子元素設(shè)置）
語法：
flex-grow ：數(shù)字;（彈性因子）- 默認(rèn)為0 ，取值為數(shù)字
- 0表示不參與富裕空間的消化
- 原理：彈性項(xiàng)目會(huì)將彈性容器里面多余的空間（富裕空間）分成等量的份數(shù)，然后按照每個(gè)彈性項(xiàng)目的比例分配給彈性項(xiàng)目里面，彈性項(xiàng)目去消化。
- 彈性因子越大，分配的彈性空間越大，盒子的寬度越大。
壓縮空間
-
同一行彈性項(xiàng)目寬度相加之后，超出彈性容器的空間。
-
原理：讓彈性項(xiàng)目通過flex-shrink去壓縮分配給彈性項(xiàng)目
分配壓縮空間
flex-shrink（給子元素設(shè)置）
設(shè)置當(dāng)前彈性容器寬度不夠時(shí)，彈性項(xiàng)目的壓縮因子（收縮因子）
-
取值：數(shù)字，默認(rèn)為1
-
數(shù)字越大，壓縮空間越大，盒子反而越小
-
原理：當(dāng)彈性容器寬度容不下當(dāng)前這行彈性項(xiàng)目時(shí)，就會(huì)按照flex-shrink來收縮彈性項(xiàng)目以達(dá)到不換行的目的。這個(gè)屬性會(huì)按照設(shè)置的值將要收縮的寬度等量劃分，減少彈性項(xiàng)目的的尺寸。
-
前提：彈性容器寬度不夠時(shí)，并且不換行，而且彈性項(xiàng)目的總寬度要大于彈性容器的寬度，才能有效
-
壓縮空間的分配公式：
每個(gè)彈性項(xiàng)目最終壓縮后的寬度=自己彈性項(xiàng)目的初始寬度-（壓縮空間/ 壓縮因子的總數(shù)）壓縮空間=每個(gè)彈性項(xiàng)目的寬度的總和- 壓縮空間：（超出容器的值）
- 壓縮空間（超出容器的值）=彈性項(xiàng)目的總寬度 - 彈性容器的寬度
- 壓縮因子的總數(shù)：設(shè)置壓縮份數(shù)的總和。（默認(rèn)是1）
練習(xí)：如果容器為500px，項(xiàng)目為120px，共有5個(gè)項(xiàng)目？
如果第一個(gè)項(xiàng)目設(shè)置flex-shrink為2，第二個(gè)設(shè)置為3， 第四個(gè)設(shè)置為3，請(qǐng)計(jì)算每個(gè)彈性項(xiàng)目最終壓縮后的寬度？
壓縮因子總數(shù)：2+3+1+3+1=10
壓縮空間=120*5-500=100
每一份的取值寬度：100/10= 10px
box1：10*2=20px 120-20=100px
box2：10*3=30px 120-30=90px
box3、box5：10*1=10px 120-10=110px
box4：10*3=30px 120-30=90px
-
flex-basis（給子元素設(shè)置）
設(shè)置彈性項(xiàng)目的 默認(rèn)寬度，其優(yōu)先級(jí)大于width
語法：
flex-basis:300px; width:400px; 優(yōu)先級(jí)：flex-basis > width > 由內(nèi)容撐開的寬度
4：10*3=30px 120-30=90px
-
flex-basis（給子元素設(shè)置）
設(shè)置彈性項(xiàng)目的 默認(rèn)寬度，其優(yōu)先級(jí)大于width
語法：
flex-basis:300px; width:400px; 優(yōu)先級(jí)：flex-basis > width > 由內(nèi)容撐開的寬度
總結(jié)
- 上一篇： 打开视界工具箱微信小程序
- 下一篇： WebSocket和心跳机制