常用的flex布局兼容性写法
//定义flex
.flex{
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}
//主轴为水平方向,起点在左边
.flex-row {
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
//主轴为垂直方向,起点在上沿
.flex-column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
//伸缩宽度
.flex-1 {
-webkit-flex: 1; /* 新版本语法: Chrome 21+ */
flex: 1; /* 新版本语法: Opera 12.1, Firefox 22+ */
-webkit-box-flex: 1; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
-moz-box-flex: 1; /* 老版本语法: Firefox (buggy) */
-ms-flex: 1; /* 混合版本语法: IE 10 */
}
// 主轴左对齐
.flex-justify-start{
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
}
// 主轴右对齐
.flex-justify-end{
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
-ms-justify-content: flex-end;
justify-content: flex-end;
}
// 主轴居中对齐
.flex-justify-center{
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
}
// 主轴两端对齐,项目之间的间隔都相等
.flex-justify-between{
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
// 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
.flex-justify-around{
-webkit-box-pack: distribute;
-webkit-justify-content: space-around;
-moz-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
}
// 交叉轴的起点对齐
.flex-align-start{
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
// 交叉轴的终点对齐
.flex-align-end{
-webkit-box-align: end;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
// 交叉轴的中点对齐
.flex-align-center{
-webkit-box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
align-items: center;
}
// 项目的第一行文字的基线对齐
.flex-align-baseline{
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-moz-align-items: baseline;
-ms-align-items: baseline;
align-items: baseline;
}
// (默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
.flex-align-stretch{
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-moz-align-items: stretch;
-ms-align-items: stretch;
align-items: stretch;
}
// 换行,第一行在上方
.flex-wrap {
-webkit-box-lines: multiple;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}