摘要：設置在彈性項目上的屬性屬性定義項目的排列順序。屬性定義了項目的縮小比例，默認為，即如果空間不足，該項目將縮小。屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋屬性。

Chrome 21+

Opera 12.1+

Firefox 22+

Safari 6.1+

IE 10+

Chrome 29+

Firefox 28+

Internet Explorer 11+

Opera 17+

Safari 6.1+ (前綴 -webkit-)

Android 4.4+

iOS 7.1+ (前綴 -webkit-)

display

display: -webkit-box;  / 老版本語法: Safari,  iOS, Android browser,     older WebKit browsers.  /
  display: -moz-box;    / 老版本語法: Firefox (buggy) / 
  display: -ms-flexbox;  / 混合版本語法: IE 10 /
  display: -webkit-flex;  / 新版本           語法： Chrome 21+ /
  display: flex;       / 新版本語法： Opera 12.1, Firefox 22+ /

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

flex-direction

    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    flex-direction:column;
    -webkit-flex-direction:column;

justify-content

　　-webkit-justify-content:center;
　　justify-content:center;
　　-moz-box-pack:center;
　　-webkit--moz-box-pack:center;
　　box-pack:center;

align-items

　　align-items:center;
　　-webkit-align-items:center;
　　box-align:center;
　　-moz-box-align:center;
　　-webkit-box-align:center;

flex

　  box-flex:num;
　　-webkit-box-flex:num;
　　-moz-box-flex:num;
　　flex:num;
　　-webkit-flex:num;

/* flex彈性盒布局兼容性寫法樣式文件
 * 常用類
 * display__flex
 * flex_direction__column
 * flex_wrap__wrap
 * justify_content__center
 * justify_content__space_between
 * justify_content__space_around
 * align_items__center
 * flex_grow__1
 * flex_shrink__0
*/

/*
    設置在彈性容器上的屬性
*/
.display__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/*flex-direction屬性決定主軸的方向（即項目的排列方向）。*/
.flex_direction__row_reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex_direction__column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex_direction__column_reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

/*默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。*/
.flex_wrap__nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex_wrap__wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex_wrap__wrap_reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

/*justify-content屬性定義了項目在主軸上的對齊方式。*/
.justify_content__flex_start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.justify_content__flex_end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.justify_content__center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.justify_content__space_between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.justify_content__space_around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

/*align-items屬性定義項目在交叉軸上如何對齊。*/
.align_items__flex_start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.align_items__flex_end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.align_items__center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.align_items__baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

/*align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。*/
.align_content__flex_start {
    -ms-flex-line-pack: start;
    align-content: flex-start;
}
.align_content__flex_end {
    -ms-flex-line-pack: end;
    align-content: flex-end;
}
.align_content__center {
    -ms-flex-line-pack: center;
    align-content: center;
}
.align_content__space_between {
    -ms-flex-line-pack: justify;
    align-content: space-between;
}
.align_content__space_around {
    -ms-flex-line-pack: distribute;
    align-content: space-around;
}

/*
    設置在彈性項目上的屬性
*/

/*order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。以下是兼容樣式寫法示例，可根據需要修改屬性值。*/
.order__1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

/*flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。以下是兼容樣式寫法示例，可根據需要修改屬性值。*/
.flex_grow__1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/*flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。以下是兼容樣式寫法示例，可根據需要修改屬性值。*/
.flex_shrink__0 {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/*
    flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。
    以下是兼容樣式寫法示例，可根據需要修改屬性值。
*/
.flex_basis__100px {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
}

/*align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。*/
.align_self__flex_start {
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.align_self__flex_end {
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.align_self__center {
    -ms-flex-item-align: center;
    align-self: center;
}
.align_self__baseline {
    -ms-flex-item-align: baseline;
    align-self: baseline;
}

父元素設為display:flex;沒有問題，但子元素flex:1這種標注在safari中不能用！子元素使用的話只能設為flex:auto，如果想實現flex:1這種效果，請用：

flex-grow:1;
flex-shrink:1;
flex-basis:0;

這三個拆分的元素代替，flex屬性就是上面三個屬性的復合簡寫。