父組件為father，子組件為son，擁有的屬性值如下

.father{
    display:flex;
    flex-direction:flex-direction:row | row-reverse |  column | column-reverse;  //主軸的方向（即項(xiàng)目的排列方向）
    flex-wrap: flex-wrap: nowrap | wrap | wrap-reverse;  //如果一條軸線 排不下，如何換行
    flex-flow:<flex-direction> || <flex-wrap>;//是flex-direction屬性和flex-wrap屬性的簡寫形式
    justify-content:flex-start | flex-end | center | space-between |space-around;  //項(xiàng)目在主軸上的對齊方式
    align-content:flex-start | flex-end | center | spance-between | space-around |stretch;//交叉軸上如何對齊。 
}

.son{
     order:<integer>;//定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0.
     flex-grow:<number>;/* default 0*///定義項(xiàng)目的放大比例，默認(rèn)值為0，即如果存在剩余空間，也不放大。
     flex-shrink:<number>;/* default 1 *///定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，改項(xiàng)目將縮小
     flex-basis: <length> | auto; /* default auto *///定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto，即項(xiàng)目的本來大小。
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]//flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。
}