.flex{
    display: flex;
    display: -webkit-flex;/*Webkit核心的瀏覽器，必須加上-webkit字首。*/
    /*注意，設為Flex佈局以後，子元素的float、clear和vertical-align屬性將失效。*/
    flex-direction: row;/*決定主軸的方向，即子專案（子元素）橫向排列還是縱向排列*/
    /*row（預設值）：主軸為水平方向，起點在左端。
    row-reverse：主軸為水平方向，起點在右端。
    column：主軸為垂直方向，起點在上沿。
    column-reverse：主軸為垂直方向，起點在下沿。*/
    flex-wrap:nowrap;/*定義如果一條軸線排不下，如何換行*/
    /*nowrap（預設）：不換行。
    wrap：換行，第一行在上方。
    wrap-reverse：換行，第一行在下方。*/
    justify-content: flex-start;/*定義了專案在主軸上的對齊方式。*/
    /*flex-start（預設值）：左對齊
    flex-end：右對齊
    center： 居中
    space-between：兩端對齊，專案之間的間隔都相等。
    space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。*/
    align-items: flex-start;/*定義專案在交叉軸上如何對齊。*/
    /*flex-start：交叉軸的起點對齊。
    flex-end：交叉軸的終點對齊。
    center：交叉軸的中點對齊。
    baseline: 專案的第一行文字的基線對齊。
    stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。*/
}

/*專案，容器裡的子元素預設成為專案，並擁有專案的預設屬性*/
.flex-item{
    order:0;/*定義專案的排列順序。數值越小，排列越靠前，預設為0。*/
    flex-grow:0;/*定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。*/
    /*如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。*/
    flex-shrink:1;/*定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。*/
    flex-basis:auto;/*定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。*/
    flex:0 1 auto;/*flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。*/
    align-self:auto;/*允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性*/
}
 

垂直居中:

display: flex; justify-content: center; align-items: center;