首先還是從兩個版本的語法開始講吧，這裡還是假設flex容器為.box，子元素為.item。
.box
box-pack定義子元素主軸對齊方式。
.box
.box
box-align定義子元素交叉軸對齊方式。
.box
.box
box-direction定義子元素的顯示方向。
.box
.box
box-orient定義子元素是否應水平或垂直排列。
.box
.box
box-lines定義當子元素超出了容器是否允許子元素換行。
.box
.box
box-flex定義是否允許當前子元素伸縮。
.item
.item
box-ordinal-group定義子元素的顯示次序，數值越小越排前。
.item
.item
.box
/*行內flex*/
.box
.box
.item
display屬性：
.box
display:box，下面的語法也是一樣的。
這裡還要注意的是，如果子元素是行內元素，在很多情況下都要使用display:block或display:inline-block把行內子元素變成塊元素（例如使用box-flex屬性），這也是舊版語法和新版語法的區別之一。
.box
space-around是不可用的：
.box
.box
.box
box-direction + box-orient + flex-direction實現，下面請看例項：
左到右
.box
.box
box-direction只是改變了子元素的排序，並沒有改變對齊方式，需要新增乙個box-pack來改變對齊方式。
上到下
.box
.box
.item
.item
box-flex如果不是0就表示該子元素允許伸縮，而flex是分開的，上面flex-grow是允許放大（預設不允許），下面的flex-shrink是允許縮小（預設允許）。box-flex預設值為0，也就是說，在預設的情況下，在兩個瀏覽器中的表現是不一樣的：
這裡還有一點，就是新舊語法的演算法是不一樣的，假設box-flex的值不等於0，舊語法中，如果有多餘的空間，box-flex的值越大，說明空白部分的佔比越多，反之亦然：
而新版的語法中，放大的比例是直接按flex-grow的值來分配的，flex-grow的縮放會覆蓋flex-shrink:0，看例子：
引數：
.item
.item
相容新舊瀏覽器的flex寫法
定義 flex def 主軸居中 flex zcenter 主軸兩端對齊 flex zbetween 主軸end對齊 flex zend 主軸start對齊 flex zstart 側軸居中 flex ccenter 側軸start對齊 flex cstart 側軸底部對齊 flex cend 側軸...
自用 flex布局相容寫法
當我在調垂直居中怎麼都居中不了的時候，我就會想用 flex 布局。當我全部都用了 flex 布局而沒有帶上相容字首，在一些裝置上，樣式簡直不忍直視 記錄一下 flex 的相容寫法，方便以後查閱。就寫幾個常用的，其他的應該就在前面加字首即可。display webkit box display moz...
flex布局詳解
2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 fl...