网页设计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：
