/*任何元素可以使用flex布局*/
.flexbox{
display:-webkit-flex; /*行内元素必须加-webkit前缀*/
display:flex;
}
/*行内元素使用flex布局*/
.inline-flexbox{
display:inline-flex;
}
/*排列*/
/*水平，起点，左*/
.row{
flex-direction:row;
}
/*水平，起点，右*/
.rowright{
flex-direction:row-reverse;
}
/*垂直，起点，上*/
.column{
flex-direction:column;
}
/*垂直，起点下*/
.columnbottom{
flex-direction:column-reverse;
}
/*换行*/
/*换行，第一行上*/
.flexwrap{
flex-wrap:wrap;
}/*换行，第一行下*/
.flexwrapbottom{
flex-wrap:wrap-reverse;
}
/*不换行*/
.flexwrapno{
flex-wrap:nowrap;
}
/*主轴对齐*/
/*靠两边*/
.flexbetween{
justify-content:space-between;
}
/*中间*/
.flexcenter{
justify-content:center;
}
/*左边*/
.flexstart{
justify-content:flex-start;
}
/*右边*/
.flexend{
justify-content:flex-end;
}
/*空间自适应*/
.flexaround{
justify-content:space-around;
}
/*副轴对齐*/
/*中间*/
.flexmiddle{
align-items:center;
}
/*左边*/
.flextop{
align-items:flex-start;
}
/*右边*/
.flexbottom{
align-items:flex-end;
}
/*文字对齐*/
.flextext{
align-items:baseline;
}
/*没有设置高度，占满副轴*/
.flexall{
align-items:stretch;
}
/*特殊元素*/
.selfleft{
align-self:flex-start;
}
.selfend{
align-self:flex-end;
}
.selfcenter{
align-self:center;
}
.selfall{
align-self:stretch;
}
