1、Flex 布局实现每行 5 个最后一行左对齐删除justify-content: space-around使用width: calc(20% - 8px)gap实现每行 5 个最后一行自然左对齐template div classflex-container div classflex-item1/div div classflex-item2/div div classflex-item3/div div classflex-item4/div div classflex-item5/div div classflex-item6/div div classflex-item7/div div classflex-item8/div div classflex-item9/div div classflex-item10/div div classflex-item11/div div classflex-item12/div div classflex-item13/div /div /template script /script style langless scoped /* 父容器核心 flex 配置 */ .flex-container { display: flex; flex-wrap: wrap; /* 自动换行 */ gap: 10px; /* 盒子之间的间距可修改 */ } /* 子盒子固定每行5个 */ .flex-item { /* 核心公式(100% - 4个间距) / 5 */ width: calc(20% - 8px); height: 80px; background: #409eff; color: white; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /style2、如果项目里必须保留justify-content: space-around可以用伪元素填充.flex-container::after { content: ; flex: auto; max-width: calc(20% - 10px); }3、Grid 网格布局最推荐最简单Grid 天生就是做多列等宽网格不用算百分比、不用处理间距直接定义5列自动换行最后一行天然左对齐完全没有 flex space-around 最后一行散开的问题。.container { display: grid; grid-template-columns: repeat(5, 1fr); /* 固定5列均分宽度 */ gap: 10px; /* 间距 */ } .item { height: 80px; background: #409eff; }4、传统 Float 浮动布局兼容老项目最老的方案IE 也能用每行 5 个自动换行最后一行天然左对齐。缺点需要清除浮动。.container::after { /* 清除浮动 */ content: ; display: block; clear: both; } .item { float: left; width: calc(20% - 8px); margin: 0 4px 10px; height: 80px; background: #409eff; }
