flex布局中justify-content: flex-start对多行无效，必须设置flex-wrap: wrap并配合align-content: flex-start才能实现每行左对齐；inline-block需统一vertical-align消除基线间隙；Grid中justify-content: start控制网格整体左对齐，justify-items: start仅控制单元格内容对齐。
flex布局里justify-content: flex-start没用？检查父容器是否设了flex-wrap: wrap
默认display: flex下，子项换行后第二行会和第一行右端对齐（因为justify-content只作用于单行主轴），想让每行都左对齐，必须开启换行并配合align-content: flex-start。很多人只改justify-content，结果没效果。
-
flex-wrap: wrap是前提，否则根本不会换行，align-content无效 -
align-content: flex-start才真正控制多行在交叉轴上的对齐方式（即各行整体向上/向左“靠拢”） - 如果只想要左对齐且不关心行间距，
align-content: flex-start足够；若需控制行间空隙，再加gap或margin
用inline-block实现等宽换行左对齐时，vertical-align引发的空白间隙
当用display: inline-block排多个等宽盒子，即使设了text-align: left，行末常出现意外右偏——其实是元素默认vertical-align: baseline导致行内基线对齐产生的间隙，不是左对齐失效。
- 解决方法统一设
vertical-align: top或vertical-align: middle，消除基线对齐副作用 - 父容器
font-size: 0也能去间隙，但后续子元素得重设font-size，维护成本高 - 注意：如果盒子含文字，
vertical-align会影响内部文字垂直位置，需微调line-height或内边距
Grid布局中justify-items: start和justify-content: start的区别
Grid里这两个属性常被混用，但作用对象完全不同：justify-items管每个格子内容的水平对齐，justify-content才管整张网格在容器内的水平位置。要让所有等宽列换行后每行都左贴边，关键在后者。
- 设
display: grid+grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))实现等宽自适应 -
justify-content: start确保整张网格左对齐容器（换行后新行不会右飘） -
justify-items: start只是让每个格子里的内容左对齐，不影响格子本身位置 - Grid天然支持换行（通过
auto-fit/auto-fill），不用额外处理wrap逻辑
IE11兼容场景下flex-wrap的justify-content行为异常
IE11对flex-wrap: wrap后的justify-content支持不完整，即使设了flex-start，第二行仍可能右对齐。这不是写法错，是引擎限制。
立即学习“前端免费学习笔记（深入）”；
- 绕过方案：用
float: left+ 清除浮动（overflow: hidden或::after伪元素），虽老但稳定 - 或者改用
display: table-cell配white-space: nowrap，但失去等宽弹性 - 若必须用Flex，可在JS中检测
flex-wrap是否生效，fallback到inline-block方案 - 注意IE11不支持
gap，用margin模拟间距时要防止最后一项多出右边距
最易忽略的是：换行对齐本质是「多行容器」的布局问题，不是单个盒子的事。flex要开wrap配align-content，grid看justify-content，inline-block得防vertical-align——选哪种，取决于你是否需要响应式、是否要兼容旧浏览器、以及有没有嵌套对齐需求。
