Flexbox 对齐与间距

justify-content 处理主轴上的剩余空间，align-items 处理交叉轴，align-content 只在多行有额外空间时生效。gap 表达项目之间的间距，margin-inline-start: auto 则可以把一个项目推到主轴末端，它们解决的是不同问题。

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

改变 flex-direction 会同时改变主轴方向，所以 justify-content 不等于“水平对齐”。逻辑属性和书写模式也会影响你对 start、end、inline、block 的理解，应从轴线而不是屏幕方向推理。

实验与练习

建立单行和多行 Flex 容器，分别观察 justify-content、align-items 和 align-content。把页面改为 flex-direction: column，重新解释相同规则；再用 gap 与自动 margin 做出同一视觉结果并比较维护含义。

可运行微实验：先测量再改变约束

把示例放入 320px 宽的容器，打开 Computed/Layout 面板记录 content、padding、border、margin、主轴尺寸和网格线。每次只改变一个属性：box-sizing、min-width、flex-basis、grid-template-columns 或定位方式。记录元素自身尺寸、邻居位置和是否溢出，解释是哪条约束改变了结果。

常见错误

• 把主轴和水平轴固定等同。
• 在单行容器上期待 align-content 改变项目位置。
• 通过多层空 div 伪造间距。

继续阅读

当布局同时需要行和列时，进入二维网格：Grid 网格系统。

练习

1. 用最小输入复现“Flexbox 对齐与间距”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案