定义相应的css样式,对元素添加flex属性时直接添加class即可
这是一些常用的属性,使用其它属性可相应修改即可
.flex {
display: 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 */
}
.flex-wrap {
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
.jc-center {
-webkit-box-pack: center;
-ms-justify-content: center;
-moz-justify-content: center;
-o-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
}
.jc-sa {
-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;
}
.jc-sb {
-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;
}
.jc-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 !important;
}
.jc-start {
-webkit-box-pack: justify;
-moz-justify-content: start;
-webkit-justify-content: flex-start;
justify-content: start;
}
.flex-y {
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
-moz-flex-direction: column;
-o-flex-direction: column;
}
.ai-center {
-webkit-box-align: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
-webkit-align-items: center;
align-items: center;
}
.ai-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 !important;
}