版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
移动WEB开发_flex布局
01-flex布局
- 传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能在移动端很好的布局
- flex弹性布局
- 操作方便，布局简单，移动端应用广泛
- IE11或更低版本不支持或仅部分支持
- PC端浏览器支持情况较差
- 建议：PC端用传统布局，移动端用flex布局
02-布局原理
- 通过给父盒子添加flex属性，来控制子元素的位置和排列方式
- 说明：
- 任何一个容器都可以指定为flex布局
- 父盒子设为flex布局时，子元素的float、clear和vertical-align属性失效
- 采用flex布局的元素，称为flex容器，简称“容器”。它的子元素成为容器成员，称为flex项目，简称为“项目”
- flex项目也可以设为flex容器
03-常见父项属性
flex-direction：设置主轴方向justify-content：设置主轴上的子元素排列方式flex-wrap：设置子元素是否换行align-content：设置侧轴上的子元素的排列方式（多行）align-items：设置侧轴上的子元素排列方式（单行）flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
04-flex-direction设置主轴的方向
- 主轴：默认从左至右
- 侧轴：默认从上至下
- 设置了主轴，另一个就是侧轴
- 属性值
- row：从左至右，默认值
- row-reverse：从右至左
- column：从上至下
- column-reverse：从下至上
05-flex-wrap子元素是否换行
- flex-wrap用来控制项目是否换行
- 属性值
- nowrap：默认值，不换行，如果装不下，项目会缩小
- wrap：换行
06-justify-content 设置主轴子元素排列方式
-
justify-content用来控制项目在主轴上的排列方式
-
属性值
- flex-start：默认值，从头开始
- flex-end：从尾开始
- center：居中对齐
- space-around：平分剩余空间
- space-between：先贴两边，再平分剩余空间
07-align-items设置侧轴子元素排列（单行）
-
align-items用来控制项目在侧轴上的排列方式（单行）
-
注意：与
flex-wrap: wrap;没有直接关系，即使设置了换行，但未呈现换行样式，也是有用的 -
属性值
- flex-start：从头开始
- flex-end：从尾开始
- center：居中
- stretch：拉伸，默认值，不能给项目设置高度
08-align-content设置侧轴子元素排列（多行）
-
align-center用来控制项目在侧轴上的排列方式（多行）
-
注意：与
flex-wrap: wrap;没有直接关系，即使设置了换行，但未呈现换行样式，也是没用的 -
属性值
- flex-start：默认值，从头开始
- flex-end：从尾开始
- center：居中
- space-around：平分剩余空间
- space-between：先贴两边，再平分剩余空间
- stretch：拉伸，平分容器剩余空间
-
align-item和align-content可以同时设置，单行样式自动应用align-item，出现多行样式时自动应用align-content
09-flex-flow以及总结
-
flex-direction和flex-wrap的结合属性
/*行内显示 换行*/ flex-flow:row wrap;
10-子项flex属性
- flex：控制项目所占容器剩余空间份数
- 数字
- %百分比（相对于父亲）
- align-self：项目可覆盖父项属性align-content侧轴排列方式
- order：控制项目在主轴上的排列顺序，数值越小，排列越靠前，默认值0，可以为负数
11-背景渐变linear-gradient
-
目前浏览器对该属性支持不太好，必须添加私有前缀
-
起始方向：默认值为top，可以是度数
-
语法：
background: -webkit-linear-gradient(起始方向，颜色1，颜色2，...);