Flex布局默认不支持最后一行左对齐，需用伪元素占位、改用Grid、space-around微调或JS动态处理；推荐Grid，写法简洁且天然左对齐。
Flex 布局默认不支持“最后一行左对齐”——当用 justify-content: space-between 搭配 flex-wrap: wrap 时，最后一行元素仍会强行撑开间距，导致视觉错位。这不是 bug，而是 flex 主轴分配逻辑的自然结果。要实现真正干净的左对齐效果，有几种实用解法。
用伪元素占位补足一行
核心思路是让 flex 容器始终“以为”最后一行是满的，从而避免对最后一行做特殊处理。只需在子元素末尾插入若干透明伪元素，数量等于每行最大列数减去实际余数。
- 先确定每行显示几项，比如
width: calc(25% - 15px)→ 每行最多 4 个 - 给容器添加：
::after { content: ""; flex: 0 0 calc(25% - 15px); }（仅补 1 个） - 更稳妥的做法是用 JS 动态计算需补几个，并插入真实空
<div></div>或用 CSS 变量控制伪元素数量
换用 Grid 布局（推荐）
Grid 天然适配这种场景，写法简洁、语义清晰，且无需 hack。
- 父容器设为：
display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; - 自动响应：也可改用
repeat(auto-fill, minmax(200px, 1fr)))实现响应式列数 - 最后一行默认左对齐，无需额外设置；
justify-content: start是默认行为
用 space-around + 宽度微调
若必须坚持用 Flex，space-around 比 space-between 更友好，它让首尾留白为中间间隙的一半，视觉上更接近左对齐感。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 配合固定子项宽度 +
flex-wrap: wrap - 关键点：去掉所有子项的
margin，靠 flex 自动分配空白 - 缺点：当列数变化时，首尾留白比例可能突兀，适合列数固定的后台管理页
JS 辅助动态判断并加类
适用于内容动态加载、列数不确定但兼容性要求高的项目。
- 监听容器宽度或子元素数量变化
- 计算当前行末尾剩余空位数，给最后一行容器（或其父级）加特定 class，如
.last-row-left - CSS 中单独定义：
.last-row-left > * { margin-right: 0; }或重置justify-content
不复杂但容易忽略：Grid 在现代浏览器中已全面支持（包括 iOS Safari 16.4+），除非要兼容 IE 或极老安卓 WebView，否则直接切 Grid 是最省心的选择。
