flex 九宫格布局实现
在Flex布局中，实现九宫格可以使用flex属性。以下是一个简单的九宫格实现示例：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 300px;
}
.box {
background-color: #ddd;
border: 1px solid #ccc;
text-align: center;
padding-top: 40px;
padding-bottom: 40px;
flex: 1;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</div>
</body>
</html>这段代码中，.container 是一个使用 Flex 布局的容器，其子元素 .box 将会以九宫格的形式排列。flex: 1 确保所有的 .box 有相同的大小，并且它们会填充整个容器的空间。通过flex-wrap: wrap属性，容器中的项可以换行显示。
评论已关闭