站長(zhǎng)資訊網(wǎng)
本文系轉(zhuǎn)載，原文地址是：https://juejin.cn/post/7065296076995035166
寫(xiě)在前面
彈性盒子模型即FlexBox，也就是我們常說(shuō)的flex布局，現(xiàn)在flex布局已經(jīng)是前端的主流布局方案，早就是前端必會(huì)的內(nèi)容了，接下來(lái)我們一起來(lái)看一下彈性盒子模型。【推薦：css視頻教程】
相關(guān)概念
CSS3新增的彈性盒子模型是一個(gè)完整的模塊，涉及的樣式屬性較多。首先，對(duì)彈性盒子模型的相關(guān)概念完成基本的了解。
- 伸縮容器(flex container)：包裹伸縮項(xiàng)目的父元素。
- 伸縮項(xiàng)目(flex item)：伸縮容器的每個(gè)子元素。
- 軸(axis)：每個(gè)彈性盒子模型擁有兩個(gè)軸。
- 主軸(main axis)：伸縮項(xiàng)目沿其一次排列的軸被稱為主軸。
- 側(cè)軸(cross axis)：垂直于主軸的軸被稱為側(cè)軸。
- 方向(direction)：伸縮容器的主軸由主軸起點(diǎn)和主軸終點(diǎn)，側(cè)軸由側(cè)軸起點(diǎn)和側(cè)軸終點(diǎn)描述伸縮項(xiàng)目排列的方向。
- 尺寸(dimension)：根據(jù)伸縮容器的主軸和側(cè)軸，伸縮項(xiàng)目的寬度和高度。
- 對(duì)應(yīng)主軸的稱為主軸尺寸。
- 對(duì)應(yīng)側(cè)軸的稱為側(cè)軸尺寸。
定義彈性盒子模型
CSS3中想要設(shè)置為彈性盒子模型的話，需要通過(guò)display樣式屬性設(shè)置值為flex或inline-flex即可。
display: flex; /* 值 flex 使彈性容器成為塊級(jí)元素。 */ /* 或者 */ display: inline-flex; /* 值 inline-flex 使彈性容器成為單個(gè)不可分的行內(nèi)級(jí)元素。 */
以上代碼就可以指定某個(gè)元素為彈性盒子模型，該元素成為伸縮容器，子元素則成為伸縮項(xiàng)目。
值得注意的是如果需要兼容老版本瀏覽器，需要增加瀏覽器廠商的前綴。
以下代碼定義了一個(gè)簡(jiǎn)單的彈性盒子：
html
<body> <!-- HTML 結(jié)構(gòu)為父子級(jí)結(jié)構(gòu) --> <div class="container"> <div class="item1 item">1</div> <div class="item2 item">2</div> <div class="item3 item">3</div> </div> </body>
css
.container { display: flex;/* 忽略基本樣式 */ }
效果如下：
默認(rèn)情況下，所有子元素作為伸縮項(xiàng)目都是沿著主軸水平排列。
與容器有關(guān)的屬性
flex-direction屬性
CSS中的flex-direction屬性指定了內(nèi)部元素是如何在flex容器中布局的，定義了主軸的方向(正方向或反方向)。語(yǔ)法結(jié)構(gòu)如下：
flex-direction: row | row-reverse | column | column-reverse;
row：默認(rèn)值，flex容器的主軸被定義為與文本方向相同。主軸起點(diǎn)和主軸終點(diǎn)與內(nèi)容方向相同(起點(diǎn)在左端)。row-reverse：表現(xiàn)和row相同，但是置換了主軸起點(diǎn)和主軸終點(diǎn)(起點(diǎn)在右端)column：flex容器的主軸和塊軸相同。主軸起點(diǎn)與主軸終點(diǎn)和書(shū)寫(xiě)模式的前后點(diǎn)相同(起點(diǎn)在上沿)column-reverse：表現(xiàn)和column相同，但是置換了主軸起點(diǎn)和主軸終點(diǎn)明(起點(diǎn)在下沿)
如下代碼展示了各個(gè)值的情況：
.row { /* 默認(rèn)，水平排列 */ flex-direction: row; height: 200px; } .row-reverse { /* 水平排列，反向 */ flex-direction: row-reverse; height: 200px; } .column { /* 垂直排列 */ flex-direction: column; margin-right: 100px; } .column-reverse { /* 垂直排列 反向 */ flex-direction: column-reverse; }
代碼運(yùn)行效果如下所示：
justify-content屬性
CSS中的justify-content屬性適用于伸縮容器元素，用于設(shè)置伸縮項(xiàng)目沿著主軸線的對(duì)齊方式。
語(yǔ)法結(jié)構(gòu)如下：
justify-content: center| flex-start| flex-end| space-between| space-around;
center：伸縮項(xiàng)目向第一行的中間位置對(duì)齊(居中)。flex-start：伸縮項(xiàng)目向第一行的開(kāi)始位置對(duì)齊(左對(duì)齊)。flex-end：伸縮項(xiàng)目向第一行的結(jié)束位置對(duì)齊(右對(duì)齊)。space-between：伸縮項(xiàng)目會(huì)平均分布在一行中(兩端對(duì)齊，項(xiàng)目之間的間隔都相等)。space-around：伸縮項(xiàng)目會(huì)平均分布在一行中(兩端對(duì)齊，項(xiàng)目?jī)蓚?cè)的間隔相等)。
示例代碼如下所示：
.center { justify-content: center; /* 居中 */ } .start { justify-content: flex-start; /* 左對(duì)齊 */ } .end { justify-content: flex-end; /* 右對(duì)齊 */ } .between { justify-content: space-between; /* 兩端對(duì)齊，項(xiàng)目之間的間隔都相等 */ } .around { justify-content: space-around; /* 兩端對(duì)齊，項(xiàng)目?jī)蓚?cè)的間隔相等 */ }
值得注意的是，實(shí)現(xiàn)的是伸縮項(xiàng)目相對(duì)于伸縮容器的對(duì)齊方式，與頁(yè)面無(wú)關(guān)
align-items屬性
CSS中的align-items屬性適用于伸縮容器元素，用于設(shè)置伸縮項(xiàng)目所在行沿著側(cè)軸線的對(duì)齊方式。
語(yǔ)法結(jié)構(gòu)如下：
align-items: center | flex-start| flex-end| baseline| stretch;
center：伸縮項(xiàng)目向側(cè)軸的中間位置對(duì)齊。flex-start：伸縮項(xiàng)目向側(cè)軸的起點(diǎn)位置對(duì)齊。flex-end：伸縮項(xiàng)目向側(cè)軸的終點(diǎn)位置對(duì)齊。baseline：伸縮項(xiàng)目根據(jù)伸縮項(xiàng)目的基線對(duì)齊。stretch：默認(rèn)值，伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。
示例代碼如下所示：
.center { align-items: center; /* 居中 */ } .start { align-items: flex-start; /* 頂對(duì)齊 */ } .end { align-items: flex-end; /* 底對(duì)齊 */ }
運(yùn)行效果如下所示：
配合justify-content屬性，可以做出水平垂直居中
flex-wrap屬性
CSS中的flex-wrap屬性適用于伸縮容器元素，用于設(shè)置伸縮容器的子元素是單行顯示還是多行顯示。
語(yǔ)法結(jié)構(gòu)如下：
flex-wrap: nowrap| wrap| wrap-reverse
nowrap：設(shè)置伸縮項(xiàng)目單行顯示。這種方式可能導(dǎo)致溢出伸縮容器wrap：設(shè)置伸縮項(xiàng)目多行顯示，第一行在上方。wrap-reverse：與wrap相反，第一行在下方。
示例代碼如下所示：
.nowrap { /* 單行顯示 */ flex-wrap: nowrap; } .wrap { /* 多行 */ flex-wrap: wrap; } .wrap-reverse { /* 多行，反向 */ flex-wrap: wrap-reverse; }
如果設(shè)置伸縮容器的寬度小于所有子元素寬度之和的話，子元素并沒(méi)有自動(dòng)換行也沒(méi)有溢出；效果根據(jù)伸縮容器的寬度自動(dòng)調(diào)整所有子元素的寬度。
align-content屬性
CSS中的align-content屬性適用于伸縮容器元素，用于設(shè)置伸縮行的對(duì)齊方式。該屬性會(huì)更改flex-wrap屬性的效果。
語(yǔ)法結(jié)構(gòu)如下：
align-content: center| flex-start| flex-end| space-between| space-around| stretch;
center：各行向伸縮容器的中間位置對(duì)齊。flex-start：各行向伸縮容器的起點(diǎn)位置對(duì)齊。flex-end：各行向伸縮容器的終點(diǎn)位置對(duì)齊。space-between：各行會(huì)平均分布在一行中。space-around：各行會(huì)平均分布在一行中，兩端保留一半的空間。stretch：默認(rèn)值，各行將會(huì)伸展以占用額外的空間。
值得注意的是該屬性對(duì)單行彈性盒子模型無(wú)效。
示例代碼如下：
.center { align-content: center; /* 居中 */} .start { align-content: flex-start; /* 頂對(duì)齊 */ } .end { align-content: flex-end; /* 底對(duì)齊 */ } .between { align-content: space-between; /* 兩端對(duì)齊，項(xiàng)目之間的間隔都相等 */ } .around { align-content: space-around; /* 兩端對(duì)齊，項(xiàng)目?jī)蓚?cè)的間隔相等 */ }
值得注意的是該屬性對(duì)單行彈性盒子模型無(wú)效，即：帶有flex-wrap: nowrap
flex-flow屬性
CSS中的flex-flow屬性適用于伸縮容器元素，該屬性是flex-direction和flex-wrap的簡(jiǎn)寫(xiě)屬性，默認(rèn)值為row nowrap。
語(yǔ)法結(jié)構(gòu)如下：
flex-flow: <'flex-direction'> || <'flex-wrap'>
與伸縮項(xiàng)有關(guān)的屬性
order屬性
CSS中的order屬性規(guī)定了彈性容器中的可伸縮項(xiàng)目在布局時(shí)的順序。元素按照order屬性的值的增序進(jìn)行布局。擁有相同order屬性值的元素按照它們?cè)谠创a中出現(xiàn)的順序進(jìn)行布局。
語(yǔ)法結(jié)構(gòu)
.item { order: <integer> }
屬性值
<integer>：表示此可伸縮項(xiàng)目所在的次序組，默認(rèn)為0。
值得注意的是，order僅僅對(duì)元素的視覺(jué)順序產(chǎn)生作用，并不會(huì)影響元素的邏輯順序。
示例代碼如下：
.item1 { order: 2; }.item4 { order: -1; }
flex-grow屬性
flex-grow屬性規(guī)定在相同的容器中，項(xiàng)目相對(duì)于其余彈性項(xiàng)目的增長(zhǎng)量，值默認(rèn)為0；語(yǔ)法結(jié)構(gòu)如下：
.item { flex-grow: <number>; }
示例代碼如下：
.item2 { flex-grow: 2; }
如果所有伸縮項(xiàng)目的flex-grow的值都為1，則它們將等分剩余空間；如果某個(gè)伸縮項(xiàng)目的flex-grow的值為2，其他為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
flex-shrink屬性
flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
語(yǔ)法結(jié)構(gòu)如下：
.item { flex-shrink: <number>;
示例代碼如下：
.item2 { flex-shrink: 2; }
如果所有伸縮項(xiàng)目的flex-shrink的值都為1，當(dāng)空間不足時(shí)，都將等比例縮小；如果某個(gè)伸縮項(xiàng)目的flex-shrink的值為0，其他為1，則空間不足時(shí)，前者不縮小。
flex-basis屬性
flex-basis屬性定義了在分配多余空間之前，項(xiàng)目在主軸方向上的初始大小。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。
語(yǔ)法結(jié)構(gòu)如下：
.item { flex-basis: <length> | auto; }
它可以設(shè)為跟
width或height屬性一樣的值，例如設(shè)置230px，則項(xiàng)目將占據(jù)固定空間。
flex屬性
CSS中的flex屬性是flex-grow、flex-shrink、flex-basis的簡(jiǎn)寫(xiě)屬性，用于設(shè)置伸縮項(xiàng)目如何伸長(zhǎng)或縮短以適應(yīng)伸縮容器中的可用空間。語(yǔ)法結(jié)構(gòu)如下
flex: auto | initial | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
none：元素會(huì)根據(jù)自身寬高來(lái)設(shè)置尺寸。它是完全非彈性的：既不會(huì)縮短，也不會(huì)伸長(zhǎng)來(lái)適應(yīng)flex容器。相當(dāng)于將屬性設(shè)置為"flex: 0 0 auto"。auto：元素會(huì)根據(jù)自身的寬度與高度來(lái)確定尺寸，但是會(huì)伸長(zhǎng)并吸收f(shuō)lex容器中額外的自由空間，也會(huì)縮短自身來(lái)適應(yīng)flex容器。這相當(dāng)于將屬性設(shè)置為"flex: 1 1 auto".
flex屬性可以指定1個(gè)、2個(gè)或3個(gè)值。
單值語(yǔ)法：值必須為以下其中之一:
- 一個(gè)無(wú)單位數(shù)(
<number>)：它會(huì)被當(dāng)作<flex-grow>的值。 - 一個(gè)有效的寬度(width)值：它會(huì)被當(dāng)作
<flex-basis>的值。 - 關(guān)鍵字
none，auto或initial.
雙值語(yǔ)法：第一個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作<flex-grow>的值。第二個(gè)值必須為以下之一：
- 一個(gè)無(wú)單位數(shù)：它會(huì)被當(dāng)作
<flex-shrink>的值。 - 一個(gè)有效的寬度值：它會(huì)被當(dāng)作
<flex-basis>的值。
三值語(yǔ)法:
- 第一個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作
<flex-grow>的值。 - 第二個(gè)值必須為一個(gè)無(wú)單位數(shù)，并且它會(huì)被當(dāng)作
<flex-shrink>的值。 - 第三個(gè)值必須為一個(gè)有效的寬度值，并且它會(huì)被當(dāng)作
<flex-basis>的值。
align-self屬性
CSS中align-self屬性適用于伸縮容器元素,于設(shè)置伸縮項(xiàng)目自身元素在側(cè)軸的對(duì)齊方式。該屬性可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性；語(yǔ)法結(jié)構(gòu)如下所示：
align-self: center| flex-start| flex-end| baseline| stretch;復(fù)制代碼
center：伸縮項(xiàng)目向側(cè)軸的中間位置對(duì)齊。flex-start：伸縮項(xiàng)目向側(cè)軸的起點(diǎn)位置對(duì)齊。flex-end：伸縮項(xiàng)目向側(cè)軸的終點(diǎn)位置對(duì)齊。baseline：伸縮項(xiàng)目根據(jù)伸縮項(xiàng)目的基線對(duì)齊。stretch：默認(rèn)值，伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。
示例代碼如下：
.start { align-self: flex-start; } .center { align-self: center; } .end { align-self: flex-end; }
寫(xiě)在最后
本篇文章到這就結(jié)束了，這里給大家推薦一個(gè)學(xué)習(xí)Flex布局的一個(gè)游戲，F(xiàn)lexbox Froggy – 一個(gè)用來(lái)學(xué)CSS flexbox的游戲，挺有意思的，練習(xí)flex布局可以試試。
