移动端适配-02-flex

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);
            必须添加浏览器私有前缀