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