.box-content {
    -webkit-box-sizing: content-box!important;
    box-sizing: content-box!important;
}

.box-border {
    -webkit-box-sizing: border-box!important;
    box-sizing: border-box!important;

}

.flex {
    display: -webkit-flex;
    display: flex;
}

.flex-row,.flex-x {
	display: -webkit-flex;
	display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.flex-row-,.flex-x- {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-column,.flex-y {
	display: -webkit-flex;
	display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    /*flex-direction: column-reverse;*/
}
.flex-column-,.flex-y- {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.flex-nowrap {
	display: -webkit-flex;
	display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.flex-wrap {
	display: -webkit-flex;
	display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}


/*主轴对齐方式*
 flex-start（默认值）:左对齐
 flex-end:右对齐
 center: 居中
 space-between:两端对齐，项目之间的间隔都相等。
 space-around:每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
 */

.justify-content-start, .flex-x-start {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.justify-content-end, .flex-x-end {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.justify-content-center, .flex-x-center {
    -webkit-justify-content: center;
    justify-content: center;
}

.justify-content-between, .flex-x-between {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.justify-content-around, .flex-x-around {
    -webkit-justify-content: space-around;
    justify-content: space-around;
}


/*交叉轴对齐方式
 flex-start:交叉轴的起点对齐。
 flex-end:交叉轴的终点对齐。
 center:交叉轴的中点对齐。
 baseline: 项目的第一行文字的基线对齐。
 stretch（默认值）:如果项目未设置高度或设为auto，将占满整个容器的高度。
*/

.align-items-start, .flex-y-start {
    -webkit-box-align: start;
    box-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.align-items-end, .flex-y-end {
    -webkit-box-align: end;
    box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;

}

.align-items-center, .flex-y-center {
    -webkit-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.align-items-baseline, .flex-y-baseline {
    -webkit-box-align: baseline;
    box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}

.align-items-stretch, .flex-y-stretch {
    -webkit-box-align: stretch;
    box-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}


/*多轴对齐方式*
 flex-start:与交叉轴的起点对齐。
 flex-end:与交叉轴的终点对齐。
 center:与交叉轴的中点对齐。
 space-between:与交叉轴两端对齐，轴线之间的间隔平均分布。
 space-around:每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
 stretch（默认值）:轴线占满整个交叉轴。
 */

.align-content-start,.flex-xxx-start {
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

.align-content-end,.flex-xxx-end {
    -webkit-align-content: flex-end;
    align-content: flex-end;
}

.align-content-center,.flex-xxx-center {
    -webkit-align-content: center;
    align-content: center;
}

.align-content-between,.flex-xxx-between {
    -webkit-align-content: space-between;
    align-content: space-between;
}

.align-content-around,.flex-xxx-around {
    -webkit-align-content: space-around;
    align-content: space-around;
}

.align-content-stretch,.flex-xxx-stretch {
    -webkit-align-content: stretch;
    align-content: stretch;
}


/*单个项目对齐*/

.align-self-auto {
    -webkit-align-self: auto;
    align-self: auto;
}

.align-self-start {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}

.align-self-end {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}

.align-self-center {
    -webkit-align-self: center;
    align-self: center;
}

.align-self-baseline {
    -webkit-align-self: baseline;
    align-self: baseline;
}

.align-self-stretch {
    -webkit-align-self: stretch;
    align-self: stretch;
}


/*flex属性是flex-grow, flex-shrink 和 flex-basis*/

.flex-1 {
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
}

.flex-2 {
    -webkit-flex: 2 2 0%;
    flex: 2 2 0%;
}

.flex-3 {
    -webkit-flex: 3 3 0%;
    flex: 3 3 0%;
}

.flex-4 {
    -webkit-flex: 4 4 0%;
    flex: 4 4 0%;
}

.flex-5 {
    -webkit-flex: 5 5 0%;
    flex: 5 5 0%;
}