flex布局最后一行左对齐最佳解决方案
安德玛
发布于 2022-03-09 00:16:18
发布于 2022-03-09 00:16:18
代码可运行
运行总次数：0
代码可运行
如图一行显示6个
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.parent {
width: 400px;
height: 300px;
display: flex;
justify-content: space-between;
align-content: flex-start;
flex-flow: row wrap;
border: 1px solid;
}
.parent>i {
width: 14.5%;
}
.child {
width: 14.5%;
height: 60px;
box-sizing: border-box;
background-color: skyblue;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<div class="child">a</div>
<i></i><i></i><i></i><i></i><i></i><i></i>
</div>
</body>
</html>
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
flex布局详细
更多 >
腾讯云开发者
