flex的space-between在垂直方向无效，因默认主轴为水平（flex-direction: row），需设flex-direction: column并确保容器有明确高度（如height/min-height），子项不能用margin干扰，响应式中需注意高度计算稳定性及safari的dvh兼容性。

Flex的space-between在垂直方向为什么没效果？

因为space-between只对主轴（main axis）起作用，而默认情况下Flex容器的主轴是水平的（flex-direction: row）。垂直排列时必须显式把主轴设为列方向，否则space-between会试图在水平方向分隔项目——但容器宽度固定、子项又没设width，结果就是全挤在左边，看起来完全没生效。

• 必须加flex-direction: column
• 容器需有明确高度（height或min-height），否则子项撑开容器，没有“剩余空间”可分配
• 子项不能用margin强行模拟间距，否则和space-between冲突，导致顶部/底部空白异常

响应式垂直列表：怎么让space-between在不同屏幕下都可靠？

关键不是“让它适配”，而是提前控制它生效的前提条件。响应式失效往往是因为高度计算被破坏：比如在小屏下子项换行、字体缩放、或父容器高度塌陷。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给容器设height: 100vh或min-height: 100vh（视口高度），避免内容少时高度不足
• 用max-height + overflow-y: auto防内容溢出，但注意这会让space-between按max-height而非实际内容区计算间距
• 媒体查询中若改变flex-direction（如小屏切回row），记得同步调整justify-content和align-items，否则布局错乱

space-between和space-around在垂直列表里差在哪？

区别直接体现在首尾留白：前者首项顶到容器顶部、末项顶到底部，中间等距；后者首末项到容器边缘的距离只有中间项间距的一半，视觉上更“居中”但不严格等距。

• 要真正等距（含首尾间隙 = 中间间隙），得用space-evenly（IE不支持）
• 如果首尾需要贴边，就坚持用space-between，但确保容器高度足够且子项不溢出
• 用space-around时，小屏下若子项变多，顶部/底部空白可能过小，显得拥挤

移动端Safari里flex-direction: column + space-between偶尔失效？

这是iOS 14–15.6的老问题：当容器高度由vh单位定义、且页面有地址栏滚动时，Safari会错误计算可用高度，导致space-between无空间可分。

• 临时解法：用min-height: 100dvh替代height: 100vh（dvh是动态视口单位，兼容较新iOS）
• 降级方案：对旧版Safari加@supports not (height: 100dvh)，改用gap属性（需配合display: flex; flex-direction: column）
• 别依赖height: 100%向上继承，移动端高度链极易断裂

实际最常被忽略的是容器高度来源——它必须是确定的、非依赖内容撑开的。一旦用height: auto或没设高度，space-between就彻底失去作用对象。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！