.flex-d{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;}
.flex{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-align-items: center;-moz-align-items: center;-ms-align-items: center;align-items: center;}

/* flex-direction 指定了弹性子元素在父容器中的位置 */
.flex-dir-row{-webkit-flex-direction: row;-moz-flex-direction: row;-ms-flex-direction: row;flex-direction: row;}
.flex-dir-rowReverse{-webkit-flex-direction: row-reverse;-moz-flex-direction: row-reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
.flex-dir-col{-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.flex-dir-columnReverse{-webkit-flex-direction: column-reverse;-moz-flex-direction: column-reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}

/* justify-content 弹性项沿着弹性容器的主轴线（main axis）对齐 */
.flex-row-start{-webkit-justify-content: flex-start;-moz-justify-content: flex-start;-ms-justify-content: flex-start;justify-content: flex-start;}
.flex-row-end{-webkit-justify-content: flex-end;-moz-justify-content: flex-end;-ms-justify-content: flex-end;justify-content: flex-end;}
.flex-row-center{-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;justify-content: center;}
.flex-row-between{-webkit-justify-content: space-between;-moz-justify-content: space-between;-ms-justify-content: space-between;justify-content: space-between;}
.flex-row-around{-webkit-justify-content: space-around;-moz-justify-content: space-around;-ms-justify-content: space-around;justify-content: space-around;}

/* align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式 */
.flex-col-stretch{-webkit-align-items: stretch;-moz-align-items: stretch;-ms-align-items: stretch;align-items: stretch;}
.flex-col-start{-webkit-align-items: flex-start;-moz-align-items: flex-start;-ms-align-items: flex-start;align-items: flex-start;}
.flex-col-end{-webkit-align-items: flex-end;-moz-align-items: flex-end;-ms-align-items: flex-end;align-items: flex-end;}
.flex-col-center{-webkit-align-items: center;-moz-align-items: center;-ms-align-items: center;align-items: center;}
.flex-col-baseline{-webkit-align-items: baseline;-moz-align-items: baseline;-ms-align-items: baseline;align-items: baseline;}

/* flex-wrap 换行方式 */
.flex-wrap-nowrap{-webkit-flex-wrap: nowrap;-moz-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;}
.flex-wrap-wrap{-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.flex-wrap-wrapReverse{-webkit-flex-wrap: wrap-reverse;-moz-flex-wrap: wrap-reverse;-ms-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;}

/* align-content 置各个行的对齐 */
.align-content-stretch{-webkit-align-content: stretch;-moz-align-content: stretch;-ms-align-content: stretch;align-content: stretch;}
.align-content-flexStart{-webkit-align-content: flex-start;-moz-align-content: flex-start;-ms-align-content: flex-start;align-content: flex-start;}
.align-content-flexEnd{-webkit-align-content: flex-end;-moz-align-content: flex-end;-ms-align-content: flex-end;align-content: flex-end;}
.align-content-center{-webkit-align-content: center;-moz-align-content: center;-ms-align-content: center;align-content: center;}
.align-content-between{-webkit-align-content: space-between;-moz-align-content: space-between;-ms-align-content: space-between;align-content: space-between;}
.align-content-around{-webkit-align-content: space-around;-moz-align-content: space-around;-ms-align-content: space-around;align-content: space-around;}

/* align-self 子元素自身分布位置 */
.col-self-auto{-webkit-align-self: auto;-moz-align-self: auto;-ms-align-self: auto;align-self: auto;}
.col-self-start{-webkit-align-self: flex-start;-moz-align-self: flex-start;-ms-align-self: flex-start;align-self: flex-start;}
.col-self-end{-webkit-align-self: flex-end;-moz-align-self: flex-end;-ms-align-self: flex-end;align-self: flex-end;}
.col-self-center{-webkit-align-self: center;-moz-align-self: center;-ms-align-self: center;align-self: center;}
.col-self-baseline{-webkit-align-self: baseline;-moz-align-self: baseline;-ms-align-self: baseline;align-self: baseline;}
.col-self-stretch{-webkit-align-self: stretch;-moz-align-self: stretch;-ms-align-self: stretch;align-self: stretch;}

/* justify-self 设置弹性子元素在主轴上的对齐方式 */

.row-self-stretch{-webkit-justify-self: stretch;-moz-justify-self: stretch;-ms-justify-self: stretch;justify-self: stretch;}
.row-self-start{-webkit-justify-self: flex-start;-moz-justify-self: flex-start;-ms-justify-self: flex-start;justify-self: flex-start;}
.row-self-end{-webkit-justify-self: flex-end;-moz-justify-self: flex-end;-ms-justify-self: flex-end;justify-self: flex-end;}
.row-self-left{-webkit-justify-self: left;-moz-justify-self: left;-ms-justify-self: left;justify-self: left;}
.row-self-right{-webkit-justify-self: right;-moz-justify-self: right;-ms-justify-self: right;justify-self: right;}

/* flex 属性用于指定弹性子元素如何分配空间 */

/* 横向 不考虑高度居中 */
.flexbox-row-between{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-justify-content: space-between;-moz-justify-content: space-between;-ms-justify-content: space-between;justify-content: space-between;}
.flexbox-row-center{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;justify-content: center;}
.flexbox-row-left{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-justify-content: flex-start;-moz-justify-content: flex-start;-ms-justify-content: flex-start;justify-content: flex-start;-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}

/* 纵向 */
.flexbox-col-center{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;justify-content: center;}
.flexbox-col-bottom{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-justify-content: flex-end;-moz-justify-content: flex-end;-ms-justify-content: flex-end;justify-content: flex-end;}
.flexbox-col-between{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-direction: column;-moz-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-justify-content: space-between;-moz-justify-content: space-between;-ms-justify-content: space-between;justify-content: space-between;}

/* 横向 单行 多列 有高 */
.flexbox-center{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-justify-content: center;-moz-justify-content: center;-ms-justify-content: center;justify-content: center;-webkit-align-items: center;-moz-align-items: center;-ms-align-items: center;align-items: center;}

.hid{overflow: hidden;}
.flex-1{-webkit-box-flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;flex: 1;}