?

Flexbox模型的三個規范：

1. 舊版本　　2009年　　　　display: box、inline-box

2. 混合版本　2011年　　　　display: flexbox、inline-flexbox

3. 新版本　　2012年 ?　　　 display: flex、inline-flex

?

當display屬性為以上時，將為其后代創建FFC(Flex Formatting Context)。

舊版本屬性如下：

1. box-orient　　　　定義伸縮主軸的方向（與書寫順序有關：ltr、rtl）

　　horizontal | vertical | inline-axis (內聯軸排列)| block-axis (塊軸排列)

2. box-direction　　定義伸縮項目在伸縮容器中的排列順序

　　normal | reverse

3. box-lines　　　　伸縮項目溢出時是否換行（主流瀏覽器不支持該屬性）

　　single、multiple

4. box-pack　　　　主軸方向上，額外空間的分配

　　start（默認：額外空間在最后）、end、center（額外空間僅處于兩端）、justify（額外空間平均分布在所有縫隙之間，不包括首尾邊緣）

5. box-align　　　 側軸方向上，額外空間的分配

　　start、end、center、baseline、stretch（拉伸填充側軸）

6. box-flex　　　　主軸方向上，額外空間如何在每個伸縮項目上分配；按比例均分額外空間（使用在伸縮項目上）

　　<number>

7. box-ordinal-group　　伸縮項目在伸縮流中顯示的順序，（使用在伸縮項目上）

　　<number>　　默認為1，值越大，位置越靠后；

?

混合版本屬性如下（主要針對IE10，加前綴：-ms-）：

1. flex-direction　　伸縮項目在主軸的排列順序

　　row、row-reverse、column、column-reverse

2. fllex-wrap　　　 伸縮項目超出時的處理方式

　　nowrap（單行顯示）、wrap（多行）、wrap-reverse（多行但反向排列）

3. flex-flow　　　　順序與是否換行的組合

　　flex-direction, flex-wrap

4. flex-pack　　　 伸縮項目在主軸上對齊方式

　　start、end、center、justify、distribute（伸縮項目的兩端也會保留空間）

5. flex-align　　　伸縮項目在側軸上對齊方式

　　start、end、center、baseline、stretch

6. flex-line-pack　當伸縮項目較多，多行展現時；主軸上的每一行|列成為伸縮項目行，多列中的這些行在側軸上的排列順序

　　start（在側軸上向左靠攏）、end、center、justify、distribute、stretch

7. flex　　　　　　（用于伸縮項目）類似于box-flex，伸縮項目的寬度、高度是否基于可用空間具有彈性

　　正彈性整數、負彈性整數、首選大小 | none;

8. flex-order　　 （用于伸縮項目）伸縮項目在主軸的排列順序

　　正整數，默認為0

?

新版本屬性如下：

1. flex-direction

2. flex-wrap

3. flex-flow

4. justify-content　　主軸對齊

　　flex-start、flex-end、center、space-between、space-around；

5. align-items、align-self　　伸縮項目行在側軸的對齊方式、伸縮項目自身在所在行的對齊方式

　　flex-start、flex-end、center、baseline、stretch

6. align-content　　與align-items相似，不過只有在：伸縮項目存在于多行時才有效，即：flex-wrap為wrap；

7. flex　　　　　　　（使用于伸縮項目）伸縮性

　　擴展比率、收縮比率、伸縮基準值

8. order　　　　　　（使用于伸縮項目）排列順序

　　number

?

轉載于:https://www.cnblogs.com/diydyq/p/4234630.html

總結

以上是生活随笔為你收集整理的CSS篇 《图解CSS3》笔记 Flex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。