利用css flex完成三行二列布局 完整代码
时间: 2024-09-09 08:05:25 浏览: 85
利用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`是每个子元素,它们会按照两列的形式自动排列。如果需要添加更多的元素,只要保持相同的结构即可。
阅读全文