企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
**效果图:最后一行左对齐** ![](https://img.kancloud.cn/78/71/7871ea498d462853f3e7693d4acc99f7_2033x305.png) 要求如下: 1. 每行固定元素个数 2. 每行元素都是**space-between**的效果(两端对齐,项目之间的间隔相等,即剩余空间等分成间隙) 3. 最后一行元素需要靠左对齐 ``` <div class="wrapper"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> ``` ``` .wrapper{ width: 80vw; height: 90vh; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; border: 1px solid #333; } .box{ width: 22%; height: 60px; margin-bottom: 1em; background-color: rgb(154, 199, 241); } /*重点代码*/ /* 如果最后一行是3个元素 */ .box:last-child:nth-child(4n - 1) { margin-right: 26%; } /* 如果最后一行是2个元素 */ .box:last-child:nth-child(4n - 2) { margin-right: 52%; } ```