版权声明:本文为博主原创文章,遵循 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,...);