display弹性布局-css3

弹性布局

        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：flex-direction flex-wrap；

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

            stretch 默认值，如果子元素没有设置高度，会被拉伸。

            flex-start 根据主轴方向排列元素，第二排紧跟第一排，他们之间的距离不会被弹性拉伸

            flex-end 根据主轴方向排列元素，第二排紧跟第一排，并且他的起始位置在主轴的垂直方向的下边

            space-around 行间距平分

            space-between第一行和最后一行分别出现在 垂直主轴的上边和下边，如果有第三行，则行间距相等  

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

            flex-start：（默认值）从左到右

            flx-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 相同，意义相同