justify-content: space-between 实现首尾锚定需父容器设 display: flex 和明确宽度，子元素不能收缩；动态元素推荐 gap + justify-content: center；inline-block 需处理 vertical-align 和空白符；float 已淘汰，应避免使用。
flex布局下用justify-content: space-between实现首尾锚定
当你要让三个或更多元素在一行内“两端对齐、中间等距”，justify-content: space-between 是最直接有效的方案。它不依赖元素个数，也不需要手动算 margin，但有两个硬性前提：
- 父容器必须设
display: flex - 父容器必须有明确宽度（比如
width: 100%或固定值），否则没有“剩余空间”可分配 - 子元素不能设
flex-shrink: 0以外的收缩行为，否则可能挤压变形
常见错误是只写了 justify-content: space-between 却忘了给父容器设宽，结果所有元素还是挤在左侧——因为容器高度由内容撑开，flex 主轴上没多余空间可“分”。
元素数量不固定时，改用gap + justify-content: center更稳
如果元素是动态插入（比如 JS 渲染列表），又希望它们居中且间距一致，gap 比 space-between 更可靠：
-
gap: 1rem会在每对相邻元素之间加固定间距，首尾不留空 - 配合
justify-content: center可让整组居中，避免因数量变化导致左右不对称 - 注意：IE 不支持
gap，如需兼容 IE，得回退到margin-right+ :last-child { margin-right: 0 }
别在同一个 flex 容器里既用 gap 又手动设 margin，容易叠加出双倍间距。
立即学习“前端免费学习笔记（深入）”；
inline-block 方案里 vertical-align 和空白符是隐形杀手
用 display: inline-block 实现同行时，vertical-align: top 几乎是必选项。默认的 baseline 会让文字基线对齐，导致 div 高度不一时“一高一低”：
- HTML 源码里的换行或空格会渲染成一个空格字符，造成元素间约 4px 间隙
- 解决方法之一是删掉 HTML 中子元素间的换行和空格；另一法是给父容器设
font-size: 0，再给子元素单独设字体大小 - 如果子元素含图片或文字，记得重置
line-height，否则可能影响垂直对齐精度
这个方案兼容 IE8+，但响应式切换堆叠布局时，不如 flex 灵活——你得额外写媒体查询把 inline-block 改回 block。
别碰 float，尤其现在还要考虑可访问性和 JS 操作
虽然 float: left 能强行并排，但它让元素脱离文档流，引发的问题远超收益：
- 父容器高度塌陷，必须加
overflow: hidden或伪元素清浮，代码冗余 - 后续非浮动元素会“爬”上来，布局错乱不易排查
- 屏幕阅读器对浮动内容的读取顺序可能与视觉顺序不一致
- JS 获取元素位置（如
getBoundingClientRect()）时，浮动元素的坐标计算更复杂
除非你在维护十多年前的老项目，否则没有任何理由再用 float 布局同行元素。
真正卡住人的从来不是“怎么写”，而是没确认父容器有没有宽、子元素有没有被 padding 撑爆、或者用了 float 还在找 height 塌陷的原因。这些细节比语法本身更值得盯三秒。
