flex布局早在2023年就有了，而現在是2023年6月8日，使用最新的flex語法會發現支援程度並不好，即使是在「高階」瀏覽器上也是如此，比如chrome、firefox、safari、android、ios safari下支援程度各不相同
網上現有的**中充斥著各種版本，在chrome下執行一般都沒有問題，firefox一般也還好，但android與ios safari下就顯得非常無力了。之所以會出現這樣的局面，主要是歷史原因，從2023年到2023年，期間w3c規範有了多次更新，瀏覽器支援程度也就有了差異
標誌：display: box; or a property that is box- (eg. box-pack)
標誌：display: flexbox; or the flex() function or flex-pack property
標誌：display: flex/inline-flex; and flex- properties
新增了對flex項z-index的規定
沒有大的改動
p.s.注意2015的是w3c editor』s draft，只是個草案，還處於修修改改的階段，還沒有徵集瀏覽器**商的意見
關於flex的w3c規範：
瀏覽器相容性可以參考caniuse：
根據caniuse的資料可以總結如下：
所以需要考慮新版本2012：
而android需要考慮舊版本2009：
上面分析得很清楚，針對需要相容的目標使用對應版本的語法就好了，下面給出常用的布局**：
/* 子元素-平均分欄 */
.flex1
/* 父元素-橫向排列（主軸） */
.flex-h
/* 父元素-橫向換行 */
.flex-hw
/* 父元素-水平居中（主軸是橫向才生效） */
.flex-hc
/* 父元素-縱向排列（主軸） */
.flex-v
/* 父元素-縱向換行 */
.flex-vw {
/* 09版 */
/*-webkit-box-lines: multiple;*/
布局與相容性
1.不要用hack，一定有更好的解決辦法。很多情況都是因為 結構不夠好才會出現相容性問題。2.思考如何用最少的標籤及屬性實現頁面。3.理解結構，表現，行為分離的意義。4.布局前一定要先分析頁面結構，磨刀不誤砍柴工，分析怎麼用更好的辦法實現，理清思路後，再切圖寫 5.深刻理解類的概念，注重歸類元素，多...
Flex布局的相容性
寫在前面 flex布局早在2009年就有了，而現在是2015年6月8日，使用最新的flex語法會發現支援程度並不好，即使是在 高階 瀏覽器上也是如此，比如chrome firefox safari android ios safari下支援程度各不相同 網上現有的 中充斥著各種版本，在chrome下...
相容性（空格相容性）
在chrome與firefox下顯示的寬度不同，原因是兩個瀏覽器的預設字型不同，給html規定字型即可解決。下面有各種形式的空格，各有不同 不換行空格，按下空格鍵所產生的空格，受字型影響明顯 ensp 半形空格 em寬度的一半 乙個小寫字母的寬度 基本不受字型影響 emsp 全形空格 乙個em寬度 ...