在前端开发的时候，对页面布局的时候，经常遇到固定的一行显示多个，这个经常遇到，所以我想做个记录，等到下次遇到的时候，可以直接拿来使用。本篇博客会持续更新 效果图:  ####（1）flex布局之一行显示4个，如果多于4个，自动换行，代码如下 ``` <div style="display: flex; justify-content: space-between; flex-wrap: wrap; "> <div class="item" style="background-color: aliceblue;"></div> <div class="item" style="background-color: antiquewhite;"></div> <div class="item" style="background-color: aqua;"></div> <div class="item" style="background-color: black;"></div> <div class="item" style="background-color: blueviolet;"></div> <div class="item" style="background-color: chartreuse;"></div> <div class="item" style="background-color: crimson;"></div> </div> <style> .item{ color: black; flex: 0 0 24%; height: 30px; text-align:center; line-height:30px; background-color: white; /* 边距懒得算，css函数代替 */ margin-right: calc(4% / 3); margin-bottom: calc(4% / 3); } /* 去除每行尾的多余边距 */ .item:nth-child(4n){ margin-right: 0; } /* 使最后一个元素的边距填满剩余空间 */ .item:last-child{ margin-right: auto; } </style> ``` 父盒子： ``` style="display: flex; justify-content: space-between; flex-wrap: wrap; " ``` 子盒子： ``` .item{ color: black; flex: 0 0 24%; height: 30px; text-align:center; line-height:30px; background-color: white; /* 边距懒得算，css函数代替 */ margin-right: calc(4% / 3); margin-bottom: calc(4% / 3); } /* 去除每行尾的多余边距 */ .item:nth-child(4n){ margin-right: 0; } /* 使最后一个元素的边距填满剩余空间 */ .item:last-child{ margin-right: auto; } ``` 原文：https://blog.csdn.net/m0_52518047/article/details/120676282