原文

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Webkit內核的瀏覽器，必須加上-webkit

前綴。

parent為父級元素
.parent{ 
      display: -webkit-flex; /* Safari */ 
      display: flex;
}

設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
下面6個屬性設置在容器上

flex-direction：row | row-reverse | column | column-reverse;
flex-wrap：nowrap | wrap | wrap-reverse;
flex-flow
justify-content：flex-start | flex-end | center | space-between | space-around;
align-items：flex-start | flex-end | center | baseline | stretch;
align-content：flex-start | flex-end | center | space-between | space-around | stretch;

子項目的屬性

order:屬性定義項目的排列順序。
flex-grow:flex-grow屬性定義項目的放大比例
flex-shrink:屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
flex-basis:flex-basis
屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto
，即項目的本來大小。
flex
align-self:align-self
屬性允許單個項目有與其他項目不一樣的對齊方式，

order

<style>
*{
    margin: 0;
    padding: 0;
}

.parent{

    /*老版*/
    display: -webkit-box;

    /*新版*/
    display: flex;

    
}
.item{
    min-height: 100px;
    min-width: 100px;
    background: red;
    border: 1px solid #111;
}
.item:nth-child(2){
    order: 5;
}

.item:nth-child(3){
    order: 5;
}
</style>


//html
    <div class="parent">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

** flex-grow屬性
flex-grow 屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

• 如果所有項目的flex-grow
  屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow
  屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。
  .item { flex-grow: <number>; /* default 0 */}