項目所屬性：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;
    }