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,初學者轉行到網際網路的聚集地