flex布局justify-content: space-between纵向不生效的解决方法

flex-direction: column 模式下 justify-content: space-between 失效，本质是flex容器没有定义明确高度。
块级元素默认高度由内部内容撑开，当容器高度刚好等于三个子元素（导航、核心文本、底部说明）的高度总和时，容器纵向没有剩余可分配空间，space-between 自然无法实现分散对齐的效果，视觉上和普通文档流排布没有区别。

基础配置（必做） #

• 先重置浏览器默认样式，避免出现意外滚动条、边距偏移

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 给最外层落地页容器设置flex属性和明确高度

.landing-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 核心：设置最小高度为视口高度，保证容器有足够空间分配 */
  min-height: 100vh;
  /* 背景图通用配置 */
  background: url("你的背景图路径") center/cover no-repeat;
  /* 给三个区块留统一的左右、上下安全边距 */
  padding: 2rem 1.5rem;
}

两种居中效果实现 #

根据产品需求选对应方案即可：

• 方案1：三区块分散排布，核心文本位于导航和底部的中间位置
  不需要给三个子元素加额外定位或flex属性，导航自动贴顶、底部说明自动贴底，核心文本自然落在两者中间，适合导航、底部高度固定的场景。
• 方案2：核心文本严格居中于整个视口（落地页最常用方案）
  这种场景下不需要依赖space-between分配空间，直接给核心文本加绝对定位即可，不会被导航、底部的高度变化偏移居中位置：

.landing-wrapper {
  /* 给绝对定位子元素做定位父级 */
  position: relative;
}
.core-slogan {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
}

移动端适配优化 #

把容器的min-height: 100vh替换为min-height: 100dvh，可以自动适配移动端浏览器地址栏收起、展开带来的视口高度变化，避免小屏上出现背景截断、滚动条异常的问题。

避坑提示：不要给纵向flex容器的子元素随意加flex: 1，除非你需要某个子元素撑满剩余空间，否则会打乱原有的空间分配逻辑。

内容的提问来源于stack exchange，提问作者lukas23