網頁設計flex布局瀏覽器兼容解決方案
flex 樣式類
css3 flex 的部分屬性在ie和火狐下表現不佳或支持不完善，其中ie9及以下完全不支持，ie10不支持flex-grow(即.flex-grow-0 .flex-grow-1類)，火狐24不支持flex-wrap(即.flex-wrap類)。
css3 flex 布局以主軸在水平方向、側軸在垂直方向為準，行(主軸)為水平方向、列(側軸)為垂直方向。當主軸在垂直方向、側軸在水平方向時，行即為垂直方向，列即為水平方向。無論怎樣，行都為主軸、列都為側軸。
以下各個flex布局類命名均以主軸在水平方向為準，即主軸為行;并且大部分類名都是應用在父級flex容器上的，除了.flex-grow-0 .flex-grow-1。
flex容器：
行布局：.flex-row
行反布局：.flex-row-reverse
列布局：.flex-col
列反布局：.flex-col-reverse
換行布局(默認是不支持換行的*)：.flex-wrap
flex容器單行水平方向項目排列方式
開始方向排列：.flex-row-start
居中方向排列：.flex-row-center
結束方向排列：.flex-row-end
兩端方向排列，開始結束有余白：.flex-row-around
兩端方向排列，開始結束無余白：.flex-row-between
flex容器多行垂直方向項目排列方式
開始方向排列：.flex-rows-start
居中方向排列：.flex-rows-center
結束方向排列：.flex-rows-end
兩端方向排列，開始結束有余白：.flex-rows-around
兩端方向排列，開始結束無余白：.flex-rows-between
flex容器單行垂直方向項目對齊方式
開始對齊：.flex-col-start
居中對齊：.flex-col-center
結束對齊：.flex-col-end
拉伸對齊：.flex-col-stretch
flex項目垂直方向項目對齊方式(與.flex-col類似，只是其優先級更高)
開始對齊：.flex-self-start
居中對齊：.flex-self-center
結束對齊：.flex-self-end
拉伸對齊：.flex-self-stretch
flex項目在剩余空白上分配占比
占比為0：.flex-grow-0
占比為1：.flex-grow-1
| << 上一篇：自己學習網站制作的步驟有哪些 | >> 下一篇：網頁設計中flex布局垂直水平居中 |
- 2017-11-21室內效果圖vray渲染常見問題解決方案
- 2017-10-27網頁設計為什么在不同電腦顯示不一樣
- 2017-10-23室內效果圖中的常見問題及解決方案
- 2017-09-01網頁設計博客類的靈感源于借鑒
- 2017-09-01網頁設計師的靈感主要從哪里來
- 2017-08-11室內裝修設計中如何合理布局家具
- 2017-07-26毛坯房裝修水電改造布局注意事項
- 2017-07-11網頁設計移動端H5前端性能優化方案
- 2017-07-11h5移動端頁面怎么根據設計稿布局
- 2017-06-26怎么把網頁設計的更有視覺效果
- 2017-06-22網頁設計中的樣式單位px、em、rem區別
- 2017-05-24室內設計平面布局方案和技巧
- 2017-05-09網頁設計中圖片有哪些常見的使用技巧
- 2017-05-04鄭州哪里可以學網頁設計培訓班
- 2017-05-04自適應網頁設計制作的方法和技巧
- 求學問答專業答復，快速響應
- 電話：0371-63218905
- 手機：13613841515
-
QQ：
