简单使用flex实现九宫格布局,代码如下:
<!DOCTYPE html>
<html>
<style>
.block {
background-color: orange;
flex: 1 1 100px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 300px;
height: 300px;
}
</style>
<body>
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>