1. 程式人生 > >Flexbox(彈性盒佈局模型)以及適用場景

Flexbox(彈性盒佈局模型)以及適用場景

這裡是修真院前端小課堂,每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能,本篇分享的是:

【Flexbox(彈性盒佈局模型)以及適用場景 】

大家好,今天給大家分享一下,Flexbox(彈性盒佈局模型)以及適用場景

1.背景介紹

 

佈局的傳統解決方案,基於盒狀模型,依賴display屬性+ position屬性+ float屬性。它對於那些特殊佈局非常不方便,比如,垂直居中就不容易實現。

2009年,W3C提出了一種新的方案----Flex佈局,可以簡便、完整、響應式地實現各種頁面佈局。目前,它已經得到了所有瀏覽器的支援,這意味著,現在就能很安全地使用這項功能。(ie10及以上)。

 

Flex是Flexible Box的縮寫,意為"彈性佈局",用來為盒狀模型提供最大的靈活性。

2.知識剖析

採用Flex佈局的元素,稱為Flex容器(flex container),簡稱"容器"。它的所有子元素自動成為容器成員,稱為Flex專案(flex item),簡稱"專案"。

.box {

display: flex;

}

行內元素也可以使用Flex佈局

.box {

display:inline-flex;

}

容器預設存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end;交叉軸的開始位置叫做cross start,結束位置叫做cross end。

專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size,佔據的交叉軸空間叫做cross size。

 

3.常見問題 :flex佈局的相容性

因為技術在不斷的更新,有些舊的瀏覽器只支援舊語法的書寫方式,所以就出現所謂的相容性問題

主流的5大瀏覽器為Chrome,IE,Firefox,Safari,Opera,需要考慮針對這些瀏覽器的相容

 

4.解決方案

@mixin display ($flex) {

display: -webkit-flex;  /*新版本語法: Chrome 21+ */

display: -moz-flex;  /*老版本語法: Firefox */

display: -ms-flex;  /*混合版本語法: IE 10 */

display: -o-flex;  /*老版本語法: Opera */

display: flex;  /*新版本語法: Opera 12.1, Firefox 22+ */

}

5.編碼實戰

flex-direction屬性決定主軸的方向(即專案的排列方向)

.box {

flex-direction: row;              /*預設值,主軸為水平方向,起點在左端*/

                      row-reverse;      /*主軸為水平方向,起點在右端*/

                      column;          /*主軸為垂直方向,起點在上沿*/

                      column-reverse;  /*主軸為垂直方向,起點在下沿*/

}

預設情況下,專案都排在一條線(又稱"軸線")上,flex-wrap屬性定義,如果一條軸線排不下,如何換行

.box {

flex-wrap: nowrap;        /*預設,不換行*/

                wrap;          /*換行,第一行在上方*/

                wrap-reverse;  /*換行,第一行在下方*/

}

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap

.box {

flex-flow: flex-direction flex-wrap;

}

justify-content屬性定義了專案在主軸上的對齊方式

.box {

justify-content: flex-start;      /*預設,左對齊*/

                         flex-end;        /*右對齊*/

                         center;          /*居中*/

                         space-between;  /*兩端對齊,專案之間的間隔都相等*/

                         space-around;    /*每個專案兩側的間隔相等,所以,專案之間的間隔比專案與邊框的間隔大一倍                                                          */

}

align-items屬性定義專案在交叉軸上如何對齊

.box {

align-items: flex-start;  /*交叉軸的起點對齊*/

                   flex-end;    /*交叉軸的終點對齊*/

                   center;      /*交叉軸的中點對齊*/

                  baseline;    /*專案的第一行文字的基線對齊*/

                  stretch;    /*預設,如果專案未設定高度或設為auto,將佔滿整個容器的高度*/

}

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用

.box {

align-content: flex-start;    /*主軸與交叉軸的起點對齊*/

                      flex-end;      /*主軸與交叉軸的終點對齊*/

                      center;        /*主軸與交叉軸的中點對齊*/

                      space-between;  /*主軸與交叉軸兩端對齊,軸線之間的間隔平均分佈*/

                      space-around;  /*主軸每根軸線兩側的間隔都相等,所以,軸線之間的間隔比軸線與邊框的間隔大                                                   一倍*/

                      stretch;        /*主軸軸線佔滿整個交叉軸*/

}

flex-grow, flex-shrink, flex-basis

flex-grow屬性定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。

flex-shrink屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。

flex-basis屬性定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即專案的本來大小。

flex屬性是flex-grow, flex-shrink和flex-basis的簡寫,預設值為flex: 0 1 auto。

該屬性有兩個快捷值:

auto (1 1 auto;隨著空間放大縮小而放大或縮小)

none (0 0 auto;空間放大縮小;而元素大小不改變)

6.拓展思考

flex在聖盃佈局中的應用:

聖盃佈局(Holy Grail Layout)指的是一種最常見的網站佈局。頁面從上到下,分成三個部分:頭部(header),軀幹(body),尾部(footer)。其中軀幹又水平分成三欄,從左到右為:導航、主欄、副欄。

CSS部分

 

.HolyGrail{

display:flex;

min-height:100vh;

flex-direction:column;

margin:0;

}

header,

footer{

flex:1;

background-color:#29bde0;

}

.HolyGrail-body{

display:flex;

flex:4;

background-color:#00ee00;

}

.HolyGrail-content{

flex:1;

background-color:#0000f1;

}

.HolyGrail-nav, .HolyGrail-ads{

/*兩個邊欄的寬度設為6em */

flex:0 0 6em;

}

.HolyGrail-nav{

/*導航放到最左邊*/

order:-1;

background-color:#6c71c4;

}

7.參考文獻

Flex佈局教程:語法篇http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Flex佈局教程:例項篇http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

8.更多討論

flex佈局如何製作css任務1

還是使用百分比製作九宮格里的九個正方形,然後使用換行讓div按照九宮格分佈

如何設定多個不同尺寸img在div內對齊在上邊界上

.box {

align-items: flex-start;  /*交叉軸的起點對齊*/

}

視訊連結: http://pan.baidu.com/s/1nuVlUOx 密碼:7e0j

ppt: https://ptteng.github.io/PPT/PPT/css-69-flexbox.html#/



作者:AmaYang
連結:https://www.jianshu.com/p/b61572f54300
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。

更多內容,可以加入IT交流群565734203與大家一起討論交流

這裡是技能樹·IT修真院:https://www.jnshu.com,初學者轉行到網際網路的聚集地