flex布局:
1:flex的布局原理;
2:flex布局的常用属性;
3:能够独立完成携程移动端;
1:flex布局体验:
1:传统布局:
1:兼容性好;
2:布局繁琐;
3:局限性,不能在移动端有很好的的布局
2;flex弹性布局:
1:操作方便,操作极为简单,移动端很广泛;
2:pc支持情况差;
3:ie11或更低版本,不支持,或部分支持;
2:flex的布局原理:
1:定义:弹性布局;
2:可以为盒子模型提供最大的灵活性,任何一个容器都可以指定为flex布局;
3:注意:
1:parent设置flex后,son中float,clear,verticl-align 失效
2:伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
3:item可以横向排列,也可以纵向排列
4:采用flex布局的元素成为flex容器(flex container),简称"容器",它的所有的子元素自动成为容器成员
成为flex项目(flex item),简称项目;
5:总结:
通过parent添加flex属性,来控制item的位置和排列方式;
3:flex布局父项常见属性:(display:flex)
1:flex-direction:设置主轴方向
1:flex-direction:row:默认主轴是x轴,则Y轴是侧轴;
2:flex-direction:row-reverse:x轴相反;
3:flex-direction:colum;主轴是y轴,则x轴是侧轴;
1:主轴:x轴,水平向右
2:侧轴:y轴,水平向下
3:flex-wrap:设置子元素是否换行
1:flex-wrap:nowrap;(默认不换行,如果装不下,则会缩小子元素的宽度,放到parent里面)
2:flex-wrap:wrap:换行;
2:justify-content:设置主轴上子元素的排列方式(先确定主轴是哪个)
1:justify-content:flex-start(默认值,从头部开始)
2:justify-content:flex-end(从尾部开始)
3:justify-content:center(从中间开始)
4:justify-content:space-around(平分剩余空间)
5:justify-content:space-between(先两边贴边,再平分剩余空间)
5:align-items:设置侧轴上item排列方式(单行)
1:align-items:flex-start:侧轴开始
1:align-items:flex-end:侧轴最后
1:align-items:center:侧轴居中
1:align-items:stretch:拉伸,子盒子不能给高度(宽度)(了解即可)
4:align-content:设置侧轴上item排列方式(多行):只对多行有效
1:align-content:flex-start;
2:align-content:flex-end;
3:align-content:center;
4:align-content:space-around;
5:align-content:space-between;
6:flex-flow:复合属性,相当于同时设置flex-direction和flex-wrap;
1:flex-flow: column wrap;
4:flex布局子项常见属性:
1:flex:number;(default:0)
1:flex:在剩余空间,示占多少份数;
2:百分比;表示占比多少
2:align-self:控制item在侧轴的排列方式;
1:align-self:flex-start:侧轴开始
1:align-self:flex-end:侧轴最后
1:align-self:center:侧轴居中
3:order:定义item的排列顺序;数值小越靠前;(默认是0,一般设置-1)
5:携程网案例制作:
1:有position后margin-auto:无效
2:css3盒子模型文字不竖直居中问题:
没算border,需要减少line-heigh的值减去border的值
3:常见的flex布局思路:(实现上下布局,居中对齐)
1:默认主轴是X轴;
2:将主轴设置为Y轴;
3:把侧轴居中对齐;
4:最里层的元素设置圆角:最外层设置overflow-hidden
5:n+2:从第二个开始
-n+2:前两个
6:遇到分割线:用border实现;
7:文字阴影:text-shadow:1px 1px argb(0 ,0,0,.3);
8:背景色渐变:
background:linear-gradient(起始方向,颜色1,颜色2);
background: -webkit-linear-gradient(left, orange, sandybrown);
background: -webkit-linear-gradient(top left, orange, sandybrown);
必须添加浏览器私有前缀