CSS Flex 布局中实现两端对齐，可以使用 justify-content: space-between 属性。这个属性会让弹性容器内的子元素在主轴上分布，第一个子元素位于起始位置，最后一个子元素位于结束位置，中间的子元素则均匀分布。示例代码：.container { display: flex; justify-content: space-between; }说明：justify-

CSS Flex 布局中的 `justify-content: space-between` 是实现主轴两端对齐的高效方案——它让首个子元素紧贴起点、末个紧贴终点，中间元素等距分布，但其生效依赖多重条件：父容器必须声明 `display: flex`，子元素至少两个且不能被 `flex: 0 0 100%` 或 `margin: auto` 干扰；在垂直布局（`flex-direction: column`）中还需显式设置父容器高度；而与 `space-around`、`space-evenly` 的本质区别在于首尾是否留白，设计需求常被误读为“两端对齐”实则需 `space-evenly`；更需警惕 IE11 的兼容性陷阱——不支持 `space-evenly`，且对 `flex: 1` 和 `flex-wrap` 表现异常。真正稳定的两端对齐，是数量、尺寸、方向与浏览器能力四重变量精密协同的结果。

justify-content: space-between 为什么没生效

常见原因是父容器没设 display: flex，或者子元素被设了 flex: 0 0 100% 这类强制占满的属性，导致只剩一个“可见”子项——space-between 至少需要两个及以上子元素才起作用。

另外注意：如果子元素用了 margin: auto，它会抢占对齐控制权，覆盖 justify-content 的行为。

space-between 在 flex-direction: column 时的表现

垂直方向同样有效，但必须确保父容器有明确高度（比如 height: 400px 或 min-height），否则子元素高度撑开父容器，没有剩余空间可“分配”。

此时 justify-content: space-between 会让第一个子元素贴顶、最后一个贴底，中间留空均分。

示例：

.container {
  display: flex;
  flex-direction: column;
  height: 300px; /* 必须设定 */
  justify-content: space-between;
}

和 space-around / space-evenly 的关键区别

space-between：首尾子元素紧贴容器边缘，间隙只在中间子元素之间均分；

space-around：每个子元素两侧都有一半间距，视觉上首尾离边距是中间间隙的一半；

space-evenly：所有相邻元素（含首尾与容器边）的间距完全相等。

实际选哪个，取决于设计稿里“首尾要不要留白”这个细节。很多 UI 稿写的是“两端对齐”，但设计师真正想要的其实是 space-evenly。

IE11 兼容性要注意的坑

IE11 支持 justify-content: space-between，但不支持 space-evenly；而且当子元素使用 flex: 1 时，IE11 可能错误计算剩余空间，导致间隙消失或错位。

稳妥做法：

• 避免在 IE11 场景中混用 flex: 1 和 space-between
• 用 margin 手动模拟两端对齐（例如给第一个加 margin-top: 0，最后一个加 margin-bottom: 0，中间统一设 margin: auto）
• 检查是否启用了 flex-wrap: wrap —— IE11 下它会让 space-between 完全失效

实际布局中，“两端对齐”听起来简单，但真正在 flex 容器里稳定实现，得同时盯住子元素数量、尺寸约束、书写模式和浏览器版本这四个变量。

到这里，我们也就讲完了《CSS Flex 布局中实现两端对齐，可以使用 justify-content: space-between 属性。这个属性会让弹性容器内的子元素在主轴上分布，第一个子元素位于起始位置，最后一个子元素位于结束位置，中间的子元素则均匀分布。示例代码：.container { display: flex; justify-content: space-between; }说明：justify-content 是 Flex 布局中用于控制子元素在主轴（通常是水平方向）上的对齐方式。space-between 表示子元素之间的间距相等，并且第一个子元素靠左，最后一个子元素靠右。其他相关值：值说明flex-start子元素靠左对齐（默认）flex-end子元素靠右对齐center子元素居中对齐space-around子元素之间和边缘有相等的间距space-evenly子元素之间和边缘有相等的间距（更均匀）如果你希望子元素在垂直方向也进行对齐，可以使用 align-items 属性。例如： .container { display: flex; justify-content: space-between; align-items: center》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！