弹性布局display：flex 的十二个属性(二)

2.作用于子项目中的6大属性

1.order属性：定义：项目中的排列顺序。数值越小，排列越靠前。默认值为0；
2.flex-grow属性:定义：项目的放大比例。默认值是0；即如果存在剩余空间，也不放大；
3.flex-shrink属性：定义：项目的缩小比例，默认值是1，即如果空间不足，该项目将缩小；
4.flex-basis定义：项目占据的株洲空间。（如果主轴方向为水平方向，则设置这个属性，相当于设置项目的宽度。原来的【width】将会失效）；
5.flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值是0，1，auto。然后两个属性可选。
6.align-self：定义：单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性；
属性值：与align相同，默认值为auto，表示继承父元素容器的align-items属性值.

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在中间，结果如下

2.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;
        }

效果如下

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;
        }

效果如下

4.flex-basis定义：项目占据的株洲空间。（如果主轴方向为水平方向，则设置这个属性，相当于设置项目的宽度。原来的【width】将会失效）；
5.flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值是0，1，auto。然后两个属性可选。

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

6.align-self：定义：单个项目自身在交叉轴上的排列方式，可以覆盖掉容器上的align-items属性；
属性值：与align相同，默认值为auto，表示继承父元素容器的align-items属性值.