如图需求:
1. 一行只显示3个
2. 宽度随屏宽变化而一直保持三等份
3. 高度固定
4. 总数不是3的倍数时, 居左展示
-- html
<div class="card_wrap"> <div class="c_item"></div> <div class="c_item"></div> <div class="c_item"></div> <div class="c_item"></div> <div class="c_item"></div> <div class="c_item"></div> <div class="c_item"></div> <div class="c_item"></div> </div> ---css .card_wrap {
// 大盒子 width: 98%; display: flex; flex-wrap: wrap; justify-content: flex-start; // 替代原先的space-between布局方式 } .c_item {
// 每个item flex: 1; height: 120px; margin: 0 5px 5px 0; // 间隙为5px background-color: #999; width: calc((100% - 10px) / 3); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 min-width: calc((100% - 10px) / 3); // 加入这两个后每个item的宽度就生效了 max-width: calc((100% - 10px) / 3); // 加入这两个后每个item的宽度就生效了 &:nth-child(3n) {
// 去除第3n个的margin-right margin-right: 0; } } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231659.html原文链接：https://javaforall.net
