display: flex 是让块级元素并排的最可靠方案，需作用于父容器而非子元素，配合 gap、justify-content、align-items 等属性实现精准控制，避免 float、inline-block 和 vertical-align 等误用。
用 display: flex 给父容器设布局，别碰 float
块级元素（如 div、p、h4）默认独占一行，想让它们并排，核心不是“改子元素”，而是“换父容器的布局模式”。display: flex 是当前最可靠、干扰最少的方案。
常见错误包括：
- 给每个
div单独加float: left—— 后续清浮动麻烦，响应式下易塌陷，IE 以外现代项目已淘汰 - 只设
width不设display—— 块级元素无视宽度，照样换行 - 漏掉父容器，直接在
body下堆div—— 没有共同布局上下文，对齐无从谈起
正确做法：
- 用一个语义化容器（如
<div class="row"> 或 <code><section></section>）包裹所有要并排的块 - 对该容器设置
display: flex - 用
gap控制间距（比手动写margin更干净） - 用
justify-content控制水平对齐（如space-between、center） - 用
align-items控制垂直对齐（如center防止高度不一时顶部参差） - 子元素默认按
align-items: stretch拉伸，但某些内容（如文字、img）自带基线或默认margin -
p标签有浏览器默认上下边距，会撑开高度 - 没设
box-sizing: border-box，导致padding或border加在宽度外，破坏等宽布局 - 统一重置
p、h4等标签的margin（如p { margin: 0; }） - 父容器加
align-items: center，而不是在子元素上硬套vertical-align - 所有子元素设
box-sizing: border-box，避免尺寸计算偏差 - HTML 源码中标签间的换行和空格会被渲染成约 4px 的空白间隙，必须靠注释
<!-- -->或字体大小归零来消除 - 默认按
vertical-align: baseline对齐，文字多的块会把其他块往下带，调半天才发现是基线惹的祸 - 无法统一控制首尾间距（
gap在flex里一行解决，在inline-block里得靠margin手动算 - 响应式折行时行为不可控，
flex-wrap: wrap是明确开关，inline-block折行逻辑模糊 - 父容器是
flex，但某个子div里又包了一层div并设了float—— 浮动元素脱离文档流，不再受 flex 控制 - 用了
figure+figcaption并排，但没给figure设display: flex，只靠vertical-align尝试对齐底部，结果标题高低不一 - 按钮组没用容器包裹，多个
button直接写在body下，HTML 换行产生不可见空隙，还误以为是样式问题 - 打开浏览器开发者工具，选中父容器，确认 computed 样式里
display确实是flex - 逐个检查子元素是否被其他规则覆盖（比如某个
class里写了display: block） - 看子元素是否意外被
position: absolute或float脱离了 flex 上下文
vertical-align 对块级元素无效，别乱试
新手常查到“用 vertical-align: middle 让 div 并排居中”，这根本不起作用——vertical-align 只对 inline、inline-block 和表格单元格生效，对 flex 子项或纯块级元素无意义。
立即学习“前端免费学习笔记（深入）”；
如果你看到并排后上下错位，真正原因是：
解决建议：
为什么不用 inline-block？它真不如 flex 稳
display: inline-block 确实能让块级元素并排，但它有一堆隐性陷阱，尤其对新手不友好：
除非你明确需要兼容 IE9 及更早版本（且不介意写一堆 hack），否则没必要退回到 inline-block。
对齐失效？先检查嵌套和 display 类型混用
很多“明明写了 flex 却不对齐”的问题，根源不在 flex 属性本身，而在嵌套结构里悄悄混入了不同 display 类型：
排查顺序建议：
真正难的从来不是“怎么写 flex”，而是 flex 容器一旦嵌套过深、或混入非 flex 子项，那些默认 margin、line-height、基线、空白符就会立刻浮出水面，把对齐搞乱。每次对齐失败，优先怀疑结构，再查样式。
