12弹性布局

12弹性布局

01弹性布局

    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-direction flex-wrap;

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

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

justify-content 设置主轴方向的对齐方式(重要⭐)

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

Y轴 是 垂直于主轴方向

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

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

设置弹性布局子级内容的属性

    order 设置单个弹性布局的顺序。order的值越大，元素越靠后，默认是0
    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;
    flex:1;

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