优点:解决了最后一行的bug
话不多说,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.big_box {
--base-width: 500px;
--base-margin: 10px;
display: flex;
flex-wrap: wrap;
margin: calc(-1 * var(--base-margin)) 0 0 calc(-1 * var(--base-margin));
padding: var(--base-margin);
}
.item_box {
flex: 1 1 var(--base-width);
height: 500px;
margin: var(--base-margin) 0 0 var(--base-margin);
background: oldlace;
}
i {
flex: 1 0 var(--base-width);
margin-left: var(--base-margin);
}
</style>
</head>
<body>
<div class="big_box">
<div class="item_box">1</div>
<div class="item_box">2</div>
<div class="item_box">3</div>
<div class="item_box">4</div>
<div class="item_box">5</div>
<div class="item_box">6</div>
<div class="item_box">7</div>
<div class="item_box">8</div>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>
</body>
</html>
截图: