.flex{display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;}

/* flex-direction 指定了弹性子元素在父容器中的位置 */
.flex-col-row{-webkit-flex-direction: row;flex-direction: row;} /* 横向从左到右排列（左对齐），默认的排列方式 */
.flex-col-reverse{-webkit-flex-direction: row-reverse;flex-direction: row-reverse;} /* 反转横向排列（右对齐，从后往前排，最后一项排在最前面 */
.flex-col-column{-webkit-flex-direction: column;flex-direction: column;} /* 纵向排列 */
.flex-col-columnReverse{-webkit-flex-direction: column-reverse;flex-direction: column-reverse;} /* 反转纵向排列，从后往前排，最后一项排在最上面 */

/* justify-content 弹性项沿着弹性容器的主轴线（main axis）对齐 */
.flex-row-start{-webkit-justify-content: flex-start;justify-content: flex-start;} /* 左 弹性项目向行头紧挨着填充 没有空隙 */
.flex-row-end{-webkit-justify-content: flex-end;justify-content: flex-end;} /* 右 弹性项目向行尾紧挨着填充 没有空隙 */
.flex-row-center{-webkit-justify-content: center;justify-content: center;} /* 中 弹性项目居中紧挨着填充 没有空隙 */
.flex-row-between{-webkit-justify-content: space-between;justify-content: space-between;} /* 弹性项目平均分布在该行上 两端紧靠 */
.flex-row-around{-webkit-justify-content: space-around;justify-content: space-around;} /* 弹性项目平均分布在该行上，两边留有一半的间隔空间 */

/* align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式   每个子元素是一个单位 */
.flex-col-stretch{-webkit-align-items: stretch;align-items: stretch;} /* 子元素同父元素高 */
.flex-col-start{-webkit-align-items: flex-start;align-items: flex-start;} /* 居顶 */
.flex-col-end{-webkit-align-items: flex-end;align-items: flex-end;} /* 居底 */
.flex-col-center{-webkit-align-items: center;align-items: center;} /* 居中 */
.flex-col-baseline{-webkit-align-items: baseline;align-items: baseline;}

/* flex-wrap 换行方式 */
.flex-wrap-nowrap{-webkit-flex-wrap: nowrap;flex-wrap: nowrap;} /* 单行 不换行 */
.flex-wrap-wrap{-webkit-flex-wrap: wrap;flex-wrap: wrap;} /* 多行 超出换行 */
.flex-wrap-reverse{-webkit-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;} /* 反转wrap排列 */

/* align-content 置各个行的对齐   所有子元素是一个单位 */
.flex-content-stretch{-webkit-align-content: stretch;align-content: stretch;}
.flex-content-start{-webkit-align-content: flex-start;align-content: flex-start;} /* 上 */
.flex-content-end{-webkit-align-content: flex-end;align-content: flex-end;} /* 下 */
.flex-content-center{-webkit-align-content: center;align-content: center;} /* 中 */
.flex-content-between{-webkit-align-content: space-between;align-content: space-between;} /* 上下 紧贴 平均分布 */
.flex-content-around{-webkit-align-content: space-around;align-content: space-around;} /* 上下 有空隙 平均分布 */

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

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

/* 横向 不考虑高度居中 */
.flexbox-row-between{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;} /* 不换行 两端 */
.flexbox-row-center{display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;} /* 不换行 中 */
.flexbox-row-warp{display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-flex-wrap: wrap;flex-wrap: wrap;} /* 换行 左 */

/* 纵向 */
.flexbox-col-center{display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;-webkit-justify-content: center;justify-content: center;} /* 所有子元素居中 */
.flexbox-col-bottom{display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;-webkit-justify-content: flex-end;justify-content: flex-end;} /* 所有子元素居底 */
.flexbox-col-between{display: -webkit-flex;display: flex;-webkit-flex-direction: column;flex-direction: column;-webkit-justify-content: space-between;justify-content: space-between;} 

/* 横向 单行 多列 有高 */
.flexbox-center{display: -webkit-flex;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;} /* 子元素居中 */



.hid{overflow: hidden;}
.flex-1{flex: 1;}