-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>