【css】flexible.css - flex布局的兼容写法

flex布局的兼容写法

• 全局定义
• 用法示例

全局定义

.flex {
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-column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
}

.flex-wrap {
-webkit-flex-wrap: wrap;
-webkit-box-lines: multiple;
-moz-flex-wrap: wrap;
flex-wrap: wrap;
}

.flex-x-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit--moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
}

.flex-x-start {
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit--moz-box-pack: start;
box-pack: start;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
justify-content: flex-start;
}

.flex-x-between {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit--moz-box-pack: justify;
box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}

.flex-x-end {
-webkit-box-pack: end;
-moz-box-pack: end;
-webkit--moz-box-pack: end;
box-pack: end;
-webkit-justify-content: flex-end;
-moz-justify-content: flex-end;
justify-content: flex-end;
}

.flex-y-center {
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
box-align: center;
-moz-box-align: center;
-webkit-box-align: center;
}

.flex-y-end {
-webkit-box-align: end;
-moz-align-items: flex-end;
-webkit-align-items: flex-end;
-align-items: flex-end;
}

.flex-1 {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
flex: 1;
-webkit-flex: 1;
-moz-flex-grow: 1;
}

用法示例

<!--水平展示， 上下居中-->
<div class="flex flex-x-between flex-y-center">
<div>点击展开</div>
<div class="flex-1 icon-arr-right"></div>
</div>

<!--垂直展示， 左右居中-->
<div class="flex flex-column flex-y-center">
<div>case1</div>
<div>case1</div>
</div>