首页纯css实现一个大弹性盒子里面有3*3弹性盒子的布局

纯css实现一个大弹性盒子里面有3*3弹性盒子的布局

时间: 2024-09-20 21:06:48 浏览: 57

你可以使用CSS Grid或者Flexbox来实现一个3x3的大弹性盒子布局。这里分别介绍两种方法： **使用CSS Grid：** ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; /* 自由空间大小 */ } .box { background-color: #f1f1f1; padding: 20px; } </style> </head> <body> <div class="container"> <div class="box">Box 1</div>  </div> </body> </html> ``` **使用CSS Flexbox (Row Oriented):** ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; /* 或者可以使用 'flex-start', 'center', 'end' 或者 'around' */ gap: 10px; } .box { background-color: #f1f1f1; flex: 1 0 calc(33.33% - 20px); /* 将可用空间平均分配给每个盒子 */ box-sizing: border-box; padding: 20px; } </style> </head> <body> <div class="container"> <div class="box">Box 1</div>  </div> </body> </html> ``` 在这两个例子中，`.container`是大弹性盒子，`.box`是内部的3x3小盒子。记得替换掉“Box 1”等标签内的内容，并按照需要添加剩余的盒子。

阅读全文