flex 实现多列布局
在切页面的时候，有一个ui要求，多列布局（例如三列、四列，第一列和最后一列分别靠左和靠右）
注：当然这种布局也可以网格和table布局
具体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>forgiveForever Blog</title>
<style>
.content-box {
width: 900px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: red;
}
.content-item {
width: 200px;
height: 100px;
margin-bottom: 10px;
background: gainsboro;
}
</style>
</head>
<body style="margin: 0;">
<div class="content-box">
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
<div class="content-item"></div>
</div>
</body>
</html>
实际效果
关键点
外层元素 使用
display: flex;
justify-content: space-between;
flex-wrap: wrap;
子元素必须设置宽度 例如
width: 200px;
2205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
