• QQ咨詢:4001806960
  • 咨詢熱線:400-180-6960

html5開發培訓系列之FlexBox入門

作者:wy日期:2016-06-24 22:01:45 點擊:668 FlexBox

什麽是flexbox?

Flexbox Layout(Flexible Box)模塊,W3C官方稱爲CSS彈性盒子布局,是在CSS3中定義的一種新的布局模式。

相對于傳統的布局解決方案,基于盒狀模型,依賴 display屬性 + position屬性 + float屬性。它對于那些特殊布局非常不方便,比如,垂直居中就不容易實現。Flex布局,可以更簡便、完整、響應式地實現各種頁面布局,目前已得到所有浏覽器的支持,Flex布局將成爲未來布局的首選方案

語法知識:

講語法知識之前,先來了解下這張圖,了解flex布局的盒子模型以及相關術語

flex盒子模型由容器(flex container)以及容器的直接子元素(flex item)組成。

以容器(flex container)定義,有主軸(main axis)以及交叉軸(cross axis),主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end.交叉軸的開始位置叫做cross start,結束位置叫做cross end。

(注意:當布局排列方式變化的時候,main axis跟cross axis的方向也會跟著變化,這一點非常重要)主軸(main axis)可以是水平方向,也可以是垂直方向,而交叉軸(cross axis)始終是與主軸垂直

我們把Flex盒子模型拆分成容器(container)和子項(item)

首先得指定元素是flex布局     塊狀元素 -> display:flex     行內元素 -> display:inline-flex     例如:     .box{       display:flex;      }                             
                        

設置在容器的相關屬性如下:

flex-direction/flex-wrap/flex/justify-content/align-items/align-content

flex-direction屬性:決定主軸的方向

.box{flex-direction: row | row-reverse | column | column-reverse;}                         
                    
row(默認值):主軸爲水平方向,起點在左端。 row-reverse:主軸爲水平方向,起點在右端。 column:主軸爲垂直方向,起點在上沿。 column-reverse:主軸爲垂直方向,起點在下沿。                      
                 

flex-wrap屬性

默認情況下,項目都排在一條線(又稱"軸線")上。flex-wrap屬性定義,設置如果一條軸線排不下,如何換行?

.box{flex-wrap: nowrap | wrap | wrap-reverse;}                         
(1)nowrap(默認):表示容器內的子項(flex items)保持在一行或一列 (當flex-direction爲column或column-reverse的時候)不換行(/列); (2)wrap:跟nowrap相反,表示flex items換行或換列,但以默認(左到右或上到下)的方式排列。 (3)wrap-reverse:表示flex items換行且反向排列(右到左或下到上)。                         
                    

flex-flex屬性:是一個複合屬性,是上面兩個屬性flex-direction和flex-wrap屬性的簡寫方法

.box {     flex-flow: <flex-direction> || <flex-wrap>;     }                         
                    

justify-content屬性: 定義了子項在主軸上的對齊方式

                             ▪ flex-start:彈性盒子元素將向主軸起始位置對齊     ▪ flex-end:彈性盒子元素將向主軸結束位置對齊     ▪ center:彈性盒子元素將向主軸中間位置對齊。     ▪ space-between:彈性盒子元素會平均地分布在主軸     ▪ space-around:彈性盒子元素會平均地分布在主軸裏,兩端保留子元素與子元素之間間距大小的一半。                         
                    

align-items 屬性: 定義了子項在交叉軸的對齊方式

 
▪ flex-start:彈性盒子元素的cross軸的起始位置對齊。 ▪ flex-end:彈性盒子元素的cross軸的結束爲止對齊。 ▪ center:彈性盒子元素將向cross軸中間位置對齊。 ▪ baseline:在cross軸方向以其文本的基准線對齊。 ▪ stretch:子項(flex item)在cross軸方向填滿整個容器(當固定尺寸的時候該屬性不生效)                          
                    

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

該屬性定義的是多行(/多列)的情況下,所有行/列在cross axis方向的對齊方式,跟justify-content(或align-items)對子項(flex item)對齊方式的定義類似,不過justify-content(或align-items)是針對子項(flex item)對齊,而該屬性對應的是多行/多列的對齊方式。

▪ flex-start:彈性盒子元素的cross軸的起始位置對齊。  ▪ flex-end:彈性盒子元素的cross軸的結束爲止對齊。 ▪ center:彈性盒子元素將向cross軸中間位置對齊。 ▪ baseline:在cross軸方向以其文本的基准線對齊 ▪ stretch:子項(flex item)在cross軸方向填滿整個容器(當固定尺寸的時候該屬性不生效)                          
                    

設置子項上的屬性如下:

order/flex-grow/flex-shrink/flex-basis/flex/align-self

order屬性:用整數值來定義排列順序,數值小的排在前面。可以爲負值。

.box{display:-webkit-flex;display:flex;margin:0;padding:10px;list-style:none;background-color:#eee;} .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;} #box li:nth-child(3){-webkit-order:-1;order:-1;}                          
                    

flex-grow屬性

定義項目的放大比例,默認爲0,即如果存在剩余空間,也不放大
如果所有項目的flex-grow屬性都爲1,則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性爲2,其他項目都爲1,則前者占據的剩余空間將比其他項多一倍。

.item {     flex-grow: <number>; /* default 0 */     }                         
                    

flex-shrink屬性

屬性定義了項目的縮小比例,默認爲1,即如果空間不足,該項目將縮小。如果flex-shrink值爲0,則空間不足時不縮小

.item {     flex-shrink: <number>; /* default 1 */     }                         
                    

flex-basis屬性

定義該子項默認的初始尺寸,它可以是一個長度值也可以是一個關鍵詞,跟width和height屬性相同,用來指定子項初始的尺寸值。默認值爲auto

item {     flex-basis: <length> | auto; /* default auto */     }                         
                    

flex屬性

該屬性是flex-grow,,flex-shrink,flex-basis三個值的簡寫方式,默認值爲0 1 auto,其中第二三個屬性flex-shrink和flex-basis值是可選的

該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。

.item {     flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]     }                         
                    

align-self屬性

對比align-items屬性,我們知道這個是針對某個子項(flex item)在cross axis方向的對齊方式定義,該屬性可以覆蓋對容器(container)上定義的align-items屬性

.item {     align-self: auto | flex-start | flex-end | center | baseline | stretch;     }                         

                    

上一篇: html5的本地存儲功能

下一篇: html5培訓分享不得不學的幹貨-響應式web設計

X-POWER-BY FNC V0.5.2 FROM ZZ42