2018-08-29 Flex布局

/*任何元素可以使用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;

}