一、效果预览
说明：
1.每行显示3（或其他数量n）个div块；
2.每个div块根据父容器宽度保持三等分；
3.第四个（n+1）个自动从第二行开始排列；
二、代码
<body>
<section class="content">
<div class="item">div</div>
<div class="item">div</div>
<div class="item">div</div>
<div class="item">div</div>
<div class="item">div</div>
<div class="item">div</div>
<div class="item">div</div>
</section>
</body>
<style>
.content {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
/* 替代space-between布局方式 */
}
.item {
flex: 1;
height: 120px;
background-color: green;
/* 每个div设置右、下间隔为5px */
margin: 0 5px 5px 0;
/* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
/* 目的:计算每个div的宽度，10px为每一行的总间隔 */
width: calc((100% - 10px) / 3);
/* 加入这两个后每个item的宽度就生效了 */
min-width: calc((100% - 10px) / 3);
max-width: calc((100% - 10px) / 3);
}
.item:nth-child(3n) {
/* 去除第3n个的margin-right */
/* 实现两端对齐 */
margin-right: 0;
}
</style>
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
