CSS弹性布局（二）

有6个属性设置在项目上

1.order:定义项目的排列顺序。数值越小，排列越靠前，默认为0。

例

<style>
        .div{
            width: 100%;
            background-color: green;
            height: 400px;
            display: flex;
            justify-content: space-between;
            align-content: center;

        }
        .div1{
            background-color: red;
            height: 100px;
            width: 100px;
            font-size: 22px;
            order: 2;
        }
        .div2{
            background-color: darkcyan;
            height: 150px;
            width: 200px;

        }
        .div3{
            background-color: orange;
            width: 300px;
            height: 200px;
            font-size: 40px;
            order: 1;
        }


    </style>

这样写的话，第一个div在最后，第二个div在第一个，第三个div在中间，结果如下

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

例

.div1{
            background-color: red;
            height: 100px;
            width: 100px;
            font-size: 22px;
            flex-grow: 1;
        }
        .div2{
            background-color: darkcyan;
            height: 150px;
            width: 200px;
            flex-grow: 1;

        }
        .div3{
            background-color: orange;
            width: 300px;
            height: 200px;
            font-size: 40px;
        }

给div1和div2加上flex-grow：1；结果如下

3.flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

例

.div1{
            background-color: red;
            height: 100px;
            width: 100px;
            font-size: 22px;
            flex-shrink: 2;
        }
        .div2{
            background-color: darkcyan;
            height: 150px;
            width: 200px;
            flex-shrink: 2;

        }
        .div3{
            background-color: orange;
            width: 300px;
            height: 200px;
            font-size: 40px;
        }

给div1和div2加上flex-shrink：2；结果如下

4.flex-basis:定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5.flex:flex-grow, flex-shrink 和 flex-basis的简写

例

.div1{
            background-color: red;
            height: 100px;
            width: 100px;
            font-size: 22px;
            flex:0 1 auto;
        }

6.align-self:允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。(可参考容器属性中的align-items)