用 display: flex 一行搞定三盒子并排，父容器设 display: flex 即可使子元素横向排列，配合 gap 控制间距、align-items 控制对齐，兼容性好且控制力强。
用 display: flex 一行搞定三盒子并排
三个 div 默认是块级元素，垂直堆叠。想让它们横着排，最直接、兼容性好、控制力强的方式就是父容器设 display: flex。
常见错误是只给子盒子加 float: left 或 inline-block，结果要处理空白符、清除浮动、垂直对齐等问题——纯属给自己加戏。
- 父容器加
display: flex，子盒子自动变成 flex item，横向排列 - 加
gap: 8px控制间距，比用 margin 更干净（不会影响外边距合并） - 如果盒子高度不一致，默认按
align-items: stretch拉伸，想顶部对齐就写align-items: flex-start - IE10+ 支持 flex，但老版本需要
display: -ms-flexbox前缀（真要兼容 IE9 及以下，就别用 flex，改用inline-block+ font-size: 0 技巧）
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
.container {
display: flex;
gap: 12px;
}
.box {
width: 100px;
height: 60px;
background: #eee;
}
用 display: grid 更适合等宽/响应式布局
如果三个盒子要严格等宽，或在不同屏幕下切换列数（比如移动端变一列），grid 比 flex 更省心。
容易踩的坑：只写 grid-template-columns: repeat(3, 1fr) 却忘了父容器宽度不够时，1fr 会压缩到内容最小宽度，导致溢出或换行。
立即学习“前端免费学习笔记（深入）”；
- 用
minmax(0, 1fr)替代1fr，防止内容撑破网格（尤其含长单词或未断行文本） - 想三列固定宽度（如每列 200px），直接写
grid-template-columns: repeat(3, 200px)，不用算 margin 和 box-sizing - 配合
grid-auto-flow: column可以让子元素按列填充，但日常三盒子并排基本用不到
.container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)));
gap: 12px;
}
为什么不用 float 或 inline-block？
不是不能用，而是问题多、维护成本高，尤其当盒子有 padding/margin/border 或字体大小不一致时。
典型现象：inline-block 盒子之间有看不见的空隙（源于 HTML 中的换行和空格），导致无法精确占满一行；float 后父容器高度塌陷，必须额外加 overflow: hidden 或伪元素清除。
-
inline-block要消除间隙，得设父元素font-size: 0，再给子元素单独设字体大小——绕路又难调试 -
float在现代布局中已退居“特殊定位”场景（比如文字环绕图片），拿来排三盒子属于技术降级 - 两者都不支持 gap、对齐控制弱（比如垂直居中要靠 line-height 或 transform 折腾）
响应式下三盒子变两列或一列怎么切？
别手写多个 class 切换，用媒体查询直接改父容器的 display 或网格定义就行。
关键点：不要在子盒子上加 width: 50% 这类固定值，否则和 flex/grid 的弹性逻辑冲突，容易错乱。
- flex 方案：在小屏下改
flex-direction: column或用flex-wrap: wrap+flex-basis: 50% - grid 方案更直观：用
@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }，再小一点就repeat(1, 1fr) - 注意：加了
gap后，响应式改列数时 gap 会自动生效，不用重复写
真正复杂的是当盒子内容高度差异大、又要求视觉上“对齐底边”时——flex 默认拉伸，grid 默认顶部对齐，这时候得结合 align-self 或 margin-top: auto 微调，容易漏掉。
