项目所属性：order属性、flex-grow属性、flex-shrink属性

order属性

order属性定义项目的排列顺序。数值越小（包含负值），排列越靠前，默认为0。

.item {
  order: <integer>; /* default is 0 */
}
           

默认情况下，Flex项目按源顺序排列。但是，该order属性控制它们在Flex容器中的显示顺序。

案例

.flex{
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content: space-between;
            width:400px;
            height: 400px;
            margin: auto;
            background-color: aqua;
        }
        .order_1{
            order: -1;
        }
        .order_2{
            order: -10;
        }
        .order_3{
            order: 0;
        }
        .rader_5{
            order: 2;
        }
        .order_4{
            order: 99;
        }
       .order_1,.order_2,
       .order_3,.order_4,.rader_5{
            width: 100px;
            height: 100px;
            border: 2px red solid;
            background-color: black;
       }
           

flex-grow属性

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

.item {
  flex-grow: <number>; /* default 0 */
}
           

这定义了Flex项目在必要时增长的能力。它接受一个无比的值作为一个比例。它规定了项目应占用的Flex容器内可用空间的大小。

如果所有项目都flex-grow设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间占用的空间是其他孩子的两倍（或者至少会尝试）。

负数无效。

.flex-grow{
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            align-content: space-around;
            width: 400px;
            height: 300px;
            margin: auto;
            background-color: red;
        }
        .flex-grow-1{
            flex-grow:1;
            border: 1px palegreen solid;
            background-color: palevioletred;
        }
        .flex-grow-2{
            flex-grow: 2;
            border: 1px olive solid;
            background-color: aquamarine;
        }
        .flex-grow-1,.flex-grow-2{
            width: 100px;
            height: 100px;
        }
           

flex-shrink属性

flex-shrink

属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}
           

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

案例

.main{
        display: flex;
        display: -webkit-flex;
        align-items: center;
        width: 300px;
        height: 200px;
        margin: auto;
        background-color: bisque;
    }
    .flex-shrink-1{
        flex-shrink: 1;
        background-color: aqua;
    }
    .flex-shrink-2{
        flex-shrink: 0;
        background-color: lemonchiffon;
    }
    .flex-shrink-3{
        flex-shrink: 1;
        background-color: magenta;
    }
    .flex-shrink-1,.flex-shrink-2,
    .flex-shrink-3{
        width: 100px;
        height: 120px;
    }