flex的兼容性写法

flex的兼容性

.flex{
    display:-webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox ;
    display: flex;
}
/* 主轴为垂直方向 */
.flex-column{
    -webkit-box-orient: vertical ;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
/* 主轴为水平方向  */
.flex-row{
    -webkit-box-orient: horizontal ;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
/* 交叉轴上顶端对齐 */
.flex-align-start{
    -webkit-align-items:flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items:flex-start;
}
/* 交叉轴上居中对齐 */
.flex-align-center{
    -webkit-align-items:center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items:center;
}
/* 交叉轴上底端对齐 */
.flex-align-end{
    -webkit-align-items:flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items:flex-end;
}
/* 主轴上顶端对齐 */
.flex-pack-center{
    -webkit-box-pack: start;
    -webkit-justify-content:flex-start;
    -ms-flex-pack:start;
    justify-content:flex-start;
}
/* 主轴上居中 */
.flex-pack-center{
    -webkit-box-pack: center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
}
/* 主轴上两端对齐 */
.flex-pack-justify {
    -webkit-box-pack: justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
}
/* 主轴上底端对齐 */
/* 右对齐 */
.flex-pack-end{
    -webkit-box-pack: end;
    -webkit-justify-content:flex-end;
    -ms-flex-pack:end;
    justify-content:flex-end;
}
.flex-1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.flex-2{
    -webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

.flex-3{
    -webkit-box-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
} 
/*
 * flex布局样式说明
 * @example :  flex-row-justify-center
 * 四个单词依次为：flex布局 、  主轴方向（水平或者垂直）、  主轴上的对齐方式 、 交叉轴上的对齐方式
 */
.flex-row-justify-center{
    display:-webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox ;
    display: flex;

    -webkit-box-orient: horizontal ;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-box-pack: justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;

    -webkit-align-items:center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items:center;
}
.flex-row-justify-end{
    display:-webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox ;
    display: flex;

    -webkit-box-orient: horizontal ;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-box-pack: justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;

    -webkit-align-items:flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items:flex-end;
}
.flex-row-start-center{
    display:-webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox ;
    display: flex;

    -webkit-box-orient: horizontal ;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-box-pack: start;
    -webkit-justify-content:flex-start;
    -ms-flex-pack:start;
    justify-content:flex-start;

    -webkit-align-items:center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items:center;
}
.flex-row-center-center{
    display:-webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox ;
    display: flex;

    -webkit-box-orient: horizontal ;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-box-pack: center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;

    -webkit-align-items:center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items:center;
}
.flex-row-center-start{
    display:-webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox ;
    display: flex;

    -webkit-box-orient: horizontal ;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-box-pack: center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;

    -webkit-align-items:flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items:flex-start;
}
.flex-row-center-end{
    display:-webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox ;
    display: flex;

    -webkit-box-orient: horizontal ;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-box-pack: center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;

    -webkit-align-items:flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items:flex-end;
}
.flex-column-center-center{
    display:-webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox ;
    display: flex;

    -webkit-box-orient: vertical ;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-box-pack: center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;

    -webkit-align-items:center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items:center;
}
.flex-column-end-center{
    display:-webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox ;
    display: flex;

    -webkit-box-orient: vertical ;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-box-pack: end;
    -webkit-justify-content:flex-end;
    -ms-flex-pack:end;
    justify-content:flex-end;

    -webkit-align-items:center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items:center;
}