首页利用css flex完成三行二列布局完整代码

利用css flex完成三行二列布局完整代码

时间: 2024-09-09 07:05:25 浏览: 91

利用CSS Flexbox完成三行两列布局，你可以创建一个简单的HTML容器，并给它设置display属性为flex。以下是一个完整的示例代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .container { display: flex; flex-wrap: wrap; /* 允许项目换行 */ justify-content: space-between; /* 使项目等距分布 */ gap: 10px; /* 项目之间的间距 */ padding: 10px; } .item { flex: 1 0 calc(50% - 10px); /* 设置每个项目的flex-basis，保证两个项目占据一行 */ } </style> </head> <body> <div class="container"> <div class="item">第一行第一个元素</div> <div class="item">第一行第二个元素</div> <div class="item">第二行第一个元素</div> <div class="item">第二行第二个元素</div> <div class="item">第三行第一个元素</div> <div class="item">第三行第二个元素</div> </div> </body> </html> ``` 在这个例子中，`.container`是flex容器，`.item`是每个子元素，它们会按照两列的形式自动排列。如果需要添加更多的元素，只要保持相同的结构即可。

阅读全文