先看問題：
.main{ display:flex; justify-content: space-around; flex-flow:wrap; } .item{ width: 300px; border:1px solid #ccc; text-align:center; margin:15px 15px 0 0; border-radius: 10px; }
顯然 不是我們想要的。
我們想要的是如下圖所示：
嘗試了很多種辦法最合適的就是占位不全方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
/*margin-right: -10px;*/
}
.list {
width: 300px;
height:200px;
background-color: skyblue;
margin: 15px 10px 0 0;
}
.container > i {
width: 300px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<!-- i標簽個數比list 少一個 -->
</div>
</body>
</html>
效果：
轉載於:https://www.cnblogs.com/wx790868181/p/11041969.html