移動端：Flex彈性盒布局
阿新 • • 發佈：2019-02-28
direct style firefox 要求 ansi 1年 分類 -s align
Flex彈性盒布局
一、 Flex的發展史
- 2009年W3C 提出概念，但是官方沒有flex這個詞
- 2011年瀏覽器廠商決定使用flexbox，來形容它的布局特點
- 2015年W3C正式將其修改為flexbox布局
- 2016年5月官方正式公布最新的穩定的flex布局規範標準，各大瀏覽器的支持越來越穩定
二、 定義
- Flex是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性
- 作用
- 它能夠更加高效方便的控制元素的對齊、排列
- 可以自動計算布局內元素的尺寸，無論這個元素的尺寸是固定的還是動態的
- 控制元素在頁面的布局方向
- 按照不同於DOM[文檔對象模型] 所指定排序方式對屏幕上的元素重新排序
三、 布局方式分類
- 行內級、塊級布局
- 表格布局
- 浮動、定位布局
- Flex布局
- 網格矩陣形式的布局
四、 應用場景
- 使用在現代瀏覽器中
- 有一定寬容度要求的設計中
- 相對：寬容度要求較高
- 絕對：寬容度要求較低，100%還原設計稿
五、 Flex基本概念
- 采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”
- 水平主軸（main axis）
- 垂直交叉軸（cross axis）
- 項目默認沿主軸排列
六、 Flex布局語法
七、容器的屬性
- justify-conten align-content align-items
- 容器轉為flex布局之後，項目不受float的影響
- flex-wrap的默認是nowrap，我們需要設置才會自動換行
八、項目的屬性
九、 flex兼容性處理
- 添加瀏覽器前綴
- 使用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"]
移動端：Flex彈性盒布局