拷贝直接加类名即可

/* 定义 */

.flex-def {

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box; /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox; /* 混合版本语法: IE 10 */

    display: -webkit-flex; /* 新版本语法: Chrome 21+ */

    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

}

/* 主轴居中 */

.flex-zCenter {

    -webkit-box-pack: center;

    -moz-justify-content: center;

    -webkit-justify-content: center;

    justify-content: center;

}

/* 主轴两端对齐 */

.flex-zBetween {

    -webkit-box-pack: justify;

    -moz-justify-content: space-between;

    -webkit-justify-content: space-between;

    justify-content: space-between;

}

/* 主轴end对齐 */

.flex-zEnd {

    -webkit-box-pack: end;

    -moz-justify-content: flex-end;

    -webkit-justify-content: flex-end;

    justify-content: flex-end;

}

/* 主轴start对齐 */

.flex-zStart {

    -webkit-box-pack: start;

    -moz-justify-content: start;

    -webkit-justify-content: start;

    justify-content: start;

}

/* 侧轴居中 */

.flex-cCenter {

    -webkit-box-align: center;

    -moz-align-items: center;

    -webkit-align-items: center;

    align-items: center;

}

/* 侧轴start对齐 */

.flex-cStart {

    -webkit-box-align: start;

    -moz-align-items: start;

    -webkit-align-items: start;

    align-items: start;

}

/* 侧轴底部对齐 */

.flex-cEnd {

    -webkit-box-align: end;

    -moz-align-items: flex-end;

    -webkit-align-items: flex-end;

    align-items: flex-end;

}

/* 侧轴文本基线对齐 */

.flex-cBaseline {

    -webkit-box-align: baseline;

    -moz-align-items: baseline;

    -webkit-align-items: baseline;

    align-items: baseline;

}

/* 侧轴上下对齐并铺满 */

.flex-cStretch {

    -webkit-box-align: stretch;

    -moz-align-items: stretch;

    -webkit-align-items: stretch;

    align-items: stretch;

}

/* 主轴从上到下 */

.flex-zTopBottom {

    -webkit-box-direction: normal;

    -webkit-box-orient: vertical;

    -moz-flex-direction: column;

    -webkit-flex-direction: column;

    flex-direction: column;

}

/* 主轴从下到上 */

.flex-zBottomTop {

    -webkit-box-pack: end;

    -webkit-box-direction: reverse;

    -webkit-box-orient: vertical;

    -moz-flex-direction: column-reverse;

    -webkit-flex-direction: column-reverse;

    flex-direction: column-reverse;

}

/* 主轴从左到右 */

.flex-zLeftRight {

    -webkit-box-direction: normal;

    -webkit-box-orient: horizontal;

    -moz-flex-direction: row;

    -webkit-flex-direction: row;

    flex-direction: row;

}

/* 主轴从右到左 */

.flex-zRightLeft {

    -webkit-box-pack: end;

    -webkit-box-direction: reverse;

    -webkit-box-orient: horizontal;

    -moz-flex-direction: row-reverse;

    -webkit-flex-direction: row-reverse;

    flex-direction: row-reverse;

}

/* 是否允许子元素伸缩 */

.flex-item {

    -webkit-box-flex: 1.0;

    -moz-flex-grow: 1;

    -webkit-flex-grow: 1;

    flex-grow: 1;

}

/* 子元素的显示次序 */

.flex-order{

    -webkit-box-ordinal-group: 1;

    -moz-order: 1;

    -webkit-order: 1;

    order: 1;

}
欢迎访问我的博客http://www.yuanjingzhuang.com/
巴特西

兼容新旧浏览器的flex写法

拷贝直接加类名即可

最新文章

热门文章
