day13记

弹性布局

    1  他是css3推出的布局方式
    2  低版本浏览器不支持
    3  所有移动端都支持

    设置弹性容器（弹性盒子）
    块  弹性容器：display：flex；
    行  弹性容器：display：inline-flex；
    一般行不会设置弹性容器

    设置弹性布局，只需要给父容器设置display：flex；

flex-direction 设置主轴方向

        row：默认值，主轴为水平方向，起点在左边
        row-reverse：主轴为水平，起点在右边
        column：主轴为垂直方向，起点在上面
        column-reverse：主轴为垂直方向，起点在下面

flex-wrap： 设置子元素是否换行

        nowrap：默认值，子元素可能会被压缩
        wrap：换行，行的起点在上面
        wrap-reverse：换行，行的起点在下面

    以上两个属性可以合写为flex-flow
        flex-flow：direction wrap；

align-content 设置多行元素的排列方式

        stretch 默认值。如果子元素没有设置高度，会被拉伸
        flex-start 根据主轴方向排列元素，第二排紧跟第一排
        他们之间的距离不会被弹性拉伸
        flex-end 根据主轴方向排列元素，第二排紧跟第一排，
        并且他的起始位置在主轴的垂直方向下边  
        space-around 行间距平分   
        space-between 第一行和最后一行分别出现在 垂直主轴方向
        的上边和下边，如果有第三行，则行间距相等

justify-content 设置主轴方向的对齐方式（重要）

        flex-start：（默认值）从左到右
        flex-end：从右到左
        center：居中
        space-around: 在主轴方向把父级整的尺寸按照子元素的数量
        平分，并且子元素在平分的尺寸中范围居中
        space-between: 第一个子元素在主轴起始位置，第二个子元素
        在主轴结束位置
        如果子元素的数量大于等于3，则每一个
        子元素的间距相等 第一个子元素在主轴起始位置，最后一个元素
        在主轴结束位置

    Y轴垂直于主轴方向

align-items 设置垂直于主轴方向的对齐方式

        flex-start: Y轴的起始点，如果子元素没有高度，不会拉伸
        flex-end：Y轴的结束点
        center：垂直居中
        stretch: 默认值 如果子元素没有高度，则就会被拉伸
        baseline：基线对齐

弹性布局子级

	 设置弹性布局子级内容的属性
    order 设置单个弹性布局的顺序,order的值越大，元素越靠后
    ，默认是0

flex-grow

    flex-grow 设置元素的放大比例,默认值为0 使用条件是宽度有剩余
        元素的最终宽度=元素宽度+flex-grow的值/总flex-grow的值*总体剩余			宽度
    flex-shrink 设置元素的缩小比例,默认值为1,使用条件是,总宽度大于父级的宽度
        如果值为0,则表示不缩小,保持原宽度

    flex-basis 设置子元素在父元素的主轴方向所占空间的大小,它的值可以是具体值
    也可以是百分比,默认是auto ,auto是遵循给该子元素设置的width的值

    以上三个属性可以合写
    flex:flex-grow  flex-shrink flex-basis;
    因此默认值为flex:0 1 auto;
    后面两个属性为非必写项
    flex:flex-grow

    align-self: 该属性可以设置单个子元素的垂直于主轴方向的对齐方式,它可以覆盖
    align-items 设置的方式
    align-self的属性值和align-items相同,意义相同