/* 父元素-flex容器 */
.flex{
	display: -moz-box; /* Firefox 17- */  
	display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
	display: -moz-flex; /* Firefox 18+ */  
	display: -ms-flexbox; /* IE 10 */ 
	display: flex;
}
/* 父元素-纵向排列（主轴） */
.flex-column{
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	-moz-flex-direction: column;
	-o-flex-direction: column;
	flex-direction: column;
}
/* 子元素-平均分栏 */
.flex1{
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
}
/* 父元素-横向换行 */
.flex-wrap{
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
/* 父元素-横向不换行 */
.flex-nowrap{
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -o-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
/* 父元素-竖直居中（主轴是横向才生效） */
.flex-align-center{
	-webkit-box-align: center;
	-moz-align-items: center;
	-ms-align-items: center;
	-o-align-items: center;
	-webkit-align-items: center;
	align-items: center;
}
.flex-align-start{
    -webkit-box-align: start;
    -moz-align-items: flex-start;
	-ms-align-items: flex-start;
	-o-align-items: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.flex-align-end{
    -webkit-box-align: end;
    -moz-align-items: flex-end;
	-ms-align-items: flex-end;
	-o-align-items: flex-end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}
/* 父元素-水平居中（主轴是横向才生效） */
.flex-justify-start{
    -webkit-box-pack: start;
    -ms-justify-content: start;
    -moz-justify-content: start;
    -o-justify-content: start;
    -webkit-justify-content: start;
    justify-content: start;
}

.flex-justify-center{
    -webkit-box-pack: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -o-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.flex-justify-between{
	-webkit-box-pack: justify;
	-ms-justify-content: space-between;
    -moz-justify-content: space-between;
    -o-justify-content: space-between;
    -webkit-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.flex-justify-around{
	-webkit-box-pack: justify;
	-ms-justify-content: space-around;
    -moz-justify-content: space-around;
    -o-justify-content: space-around;
    -webkit-justify-content: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
.flex-justify-end{
	-webkit-box-pack: end;
	-ms-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -o-justify-content: flex-end;
    -webkit-justify-content: flex-end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

.flex-mobile-justify-content-center-of-between {
    -webkit-box-pack: center;
	-ms-justify-content: center;
    -moz-justify-content: center;
    -o-justify-content: center;
    -webkit-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
    @media screen and (min-width: 600px) {
        -webkit-box-pack: justify;
        -ms-justify-content: space-between;
        -moz-justify-content: space-between;
        -o-justify-content: space-between;
        -webkit-justify-content: space-between;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
}

.flex-moblie-align-items-center {
    @media screen and  (max-width: 600px) {
        -webkit-box-align: center;
        -moz-align-items: center;
        -ms-align-items: center;
        -o-align-items: center;
        -webkit-align-items: center;
        align-items: center;
   }
}