flex伸縮佈局盒模型總結

如下內容爲大漠大大的書籍《圖解css3核心技術與案例實戰》觀看後的總結。

css2.1中定義了四種佈局模式，由一個盒與其兄弟、祖先盒的關係決定其尺寸與位置的算法

塊佈局

行內佈局

表格佈局

定位佈局

css3引入的佈局模式flexbox佈局，主要思想是讓容器有能力讓其子項目可以改變其寬度、高度，以最佳方式填充可用空間。flex容器會使子項目擴展來填滿可用空間，或縮小他們以防止溢出容器。

 

1、伸縮容器和伸縮項目

經過display屬性顯式的給一個元素設置爲flex或者inline-flex，這個容器就是一個伸縮容器。伸縮容器會爲其內容創立新的伸縮格式化上下文，其中設置爲flex的容器被渲染爲一個塊級元素，而設置爲inline-flex的容器則渲染爲一個行內元素。 若元素display的指定值爲inline-flex，且元素是一個浮動或絕對定位元素，則display的計算值爲flex。

1）伸縮容器的屬性

• 伸縮流方向 ：指伸縮容器的主軸方向，決定伸縮項目放置在伸縮容器的方向。flex-direction默認值爲row。09版本爲box-orient，默認值爲inline-axis。
• 伸縮行換行：伸縮項目溢出伸縮容器時，設置伸縮容器的伸縮項目是單行顯示仍是多行顯示。以及決定側軸的方向。flex-wrap：nowrap。09版本爲box-lines：single
• 伸縮方向與換行：伸縮方向與伸縮換行的縮寫。flex-flow:flex-direction flex-wrap。
• 主軸對齊：設置伸縮容器當前行伸縮項目在主軸方向的對齊方式，制定如何在伸縮項目之間分佈伸縮容器額外空間。
• 側軸對齊：伸縮項目能夠在伸縮容器當前行的側軸上進行對齊。
• 堆棧伸縮行：定義伸縮容器中伸縮項目行在側軸的對齊方式，相似於側軸對齊，只不過這是用來控制伸縮項目行在佈局軸的堆放方式。

2）伸縮項目的屬性

• 顯示順序：默認顯示順序是按照源碼中出現的前後順序，能夠經過伸縮項目的顯示順序修改伸縮項目在頁面中顯示的順序，也能夠經過這個屬性對伸縮項目進行排序組合。
• 側軸對齊：包括兩種，一種是align-items，設置伸縮容器中包括匿名伸縮項目的全部項目的對齊方式，另外一種是align-self，單獨在伸縮項目上覆寫默認的對齊方式。
• 伸縮性：定義伸縮項目可改變他們的寬度或高度填補可用的空間。

 

2、flexbox模型規範及兼容性

1）版本

舊版本：2009年版本，使用 display：box / inline-box

混合版本：2011年版本，使用 display : flexbox  / i nline-flexbox

最新版本 ：使用 display : flex / inline-flex

 

2)兼容性

舊版本：box

ie	Firefox	chrome	opera	safari
no	2-21	4-20	no	3.1-6

 

最新版本

ie	Firefox	chrome	opera	Safari
11+	22+	21+	12.1+	no

 

混合版本僅ie10支持

 

3、各版本屬性差別

1）開啓flexbox

標準版本 display :flex / inline-flex

混合版本 display : flexbox / inline-flexbox

最老版本  display :box / inline-box

 

2) 伸縮流方向

最老版本： box-orient 用來設置伸縮流方向，而box-direction用來設置伸縮項目在伸縮容器中的流動順序。

box-orient: horizontal / vertical  /  inline-axis / block-axis

box-direction： normal / reverse 

混合版本：flex-direction : row / row-reverse / column  / column-reverse

最新版本 ：flex-direction : row /row-reverse / column / column- reverse 

 

3）伸縮換行 

最老版本：box-lines：single / multiple  目前還沒瀏覽器支持

混合版本：flex-wrap: nowrap / wrap / wrap-reverse

最新版本 ：flex-wrap: nowrap / wrap / wrap-reverse

 

4）伸縮流方向與伸縮換行 （混合版本新增屬性）

混合版本：flex-flow：<flex-direction > | <flex-wrap>

最新版本 ：flex-flow：<flex-direction > | <flex-wrap>

 

5）主軸對齊

最老版本：box-pack:start / end / center / justify

混合版本：flex-pack : start / end / center / justify /distribute

最新版本 ：justify-content: flex-start / flex-end /center / space-between / space-around

 

6)側軸對齊

最老版本： box-align :start / end /center / baseline /stretch

混合版本：flex-align： start /end / center / baseline /stretch

最新版本 ：

align-items :flex-start / flex-end / center / baseline /stretch

align-self :同上。對於匿名項目若是伸縮項目的任一個側軸上的外邊距爲auto，則align-self沒有效果，若是align-self的值爲auto，則其計算值爲伸縮項目的伸縮容器的align-items值。若是該伸縮項目沒有伸縮容器，則計算值爲stretch。

 

7）伸縮性

最老版本：box-flex：<number>

混合版本：-ms-flex :<positive-flex ><negative-flex > <preferred-size > | none 

最新版本 ：flex : none | <flex-grow > | flex-shrink > ? || <flex-basis>  0/1/auto

 

8)堆棧伸縮行  針對的是羣體

混合版本：flex-line-pack:start / end / center / justify / distribute / stretch

最新版本 ：align-content：flex-start / flex- end /center / space-between /space-around 

9) 顯示順序

最老版本：box-ordinal-group : <integer> 默認值爲1

混合版本：flex-order：<integer>默認值爲0

最新版本 ：order:<number>