您的位置：首页 > 其它

-webkit-box 与 -webkit-flex 的差异

2015-11-30 11:39 651 查看

-webkit-box 应该是 -webkit-flex 的旧写法
使用-webkit-box 的时候 -webkit-flex-wrap 属性不生效，必须使用-webkit-flex

正确的css覆盖顺序是

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container {
display: flex;
display: -webkit-flex;
background-color: gray;
-webkit-box-pack: justify;
width: 100%;
-webkit-flex-wrap: wrap-reverse;
-webkit-box-orient: horizontal;
height: 200px;

}

.blue {
border: 1px solid red;
min-width: 100px;
-webkit-box-flex: 1;
margin: 10px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航