移動端：Flex彈性盒佈局

Flex彈性盒佈局

---

1、 Flex的發展史

1. 2009年W3C 提出概念，可是官方沒有flex這個詞
2. 2011年瀏覽器廠商決定使用flexbox，來形容它的佈局特色
3. 2015年W3C正式將其修改成flexbox佈局
4. 2016年5月官方正式公佈最新的穩定的flex佈局規範標準，各大瀏覽器的支持愈來愈穩定

2、 定義

1. Flex是 Flexible Box 的縮寫，意爲"彈性佈局"，用來爲盒狀模型提供最大的靈活性
2. 做用
• 它可以更加高效方便的控制元素的對齊、排列
• 能夠自動計算佈局內元素的尺寸，不管這個元素的尺寸是固定的仍是動態的
• 控制元素在頁面的佈局方向
• 按照不一樣於DOM[文檔對象模型] 所指定排序方式對屏幕上的元素從新排序

3、 佈局方式分類

1. 行內級、塊級佈局
2. 表格佈局
3. 浮動、定位佈局
4. Flex佈局
5. 網格矩陣形式的佈局

4、 應用場景

1. 使用在現代瀏覽器中
2. 有必定寬容度要求的設計中
• 相對：寬容度要求較高
• 絕對：寬容度要求較低，100%還原設計稿

5、 Flex基本概念

1. 採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱」容器」。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱」項目」
2. 水平主軸（main axis）
3. 垂直交叉軸（cross axis）
4. 項目默認沿主軸排列

 6、 Flex佈局語法

7、容器的屬性

*      flex-direction的改變，一些依賴於主軸定義的屬性也跟着改變

• justify-conten    align-content    align-items
• 容器轉爲flex佈局以後，項目不受float的影響
• flex-wrap的默認是nowrap，咱們須要設置纔會自動換行

8、項目的屬性

9、 flex兼容性處理

1. 添加瀏覽器前綴
2. 使用sublime的autoprefixer插件進行前綴補全

• 打開sublime下載、安裝 autoprefixer 插件
• 設置快捷鍵：選擇菜單 Preferences > Key Bindings – User，可自定義
• { "keys": ["ctrl+alt+p"], "command": "autoprefixer" }
• 設置成功，在css裏面寫transition:all 2s,執行快捷鍵時候自動編譯成 -webkit-transition:all 2s;transition:all 2s；原來sublime的插件autoprefixer默認是沒有兼容IE、firefox和opera的
• 如何配置兼容IE、firefox和opera等
• 選擇菜單：Preferences > Package Settings > Autoprefixer > Settings - User 爲瀏覽最新版本添加前綴，市場份額大於0.1%，美國份額>5%，ie6-ie8，火狐版本20如下等
• "browsers": ["last 2 version", "> 0.1%", "> 5% in US", "ie 6-8","Firefox < 20"]