CSS Flex布局中如何通过flex-direction实现元素纵向对齐

Flex布局的轴方向会随flex-direction属性变化：

• 默认flex-direction: row时，主轴为水平方向，交叉轴为垂直方向
• 设置flex-direction: column后，主轴切换为垂直方向，交叉轴切换为水平方向

你当前代码失效的核心原因是属性作用的轴变了：

• 外层容器设置的justify-content: space-evenly是控制主轴对齐的，切到纵向布局后，这个属性会让子元素在垂直方向均匀分散排布，而不是从上到下依次紧贴排列
• 你写的align-items: center仅能控制子元素在水平交叉轴上的居中效果，完全不影响垂直主轴的排列逻辑

直接在776px的媒体查询块中覆盖主轴对齐属性即可，调整后CSS如下：

.banner-content-container {
  display: flex;
  justify-content: space-evenly;
  padding-top: 200px;
}

@media screen and (max-width:776px) {
  .banner-content-container {
    flex-direction: column;
    justify-content: flex-start; /* 控制垂直主轴方向，子元素从顶部开始依次排列 */
    align-items: flex-start; /* 控制水平交叉轴方向，左对齐；需要水平居中就保留center，右对齐用flex-end */
    gap: 24px; /* 可选，给纵向排列的子元素加统一间距，避免内容贴太挤，数值可按需调整 */
  }
}

• 加上justify-content: flex-start后，会覆盖外层设置的space-evenly，三个内容块会从容器顶部开始从上到下依次排布，不会出现垂直方向散开留大段空白的问题
• align-items可根据设计需求选值：要内容左对齐用flex-start，要水平居中就用center，要右对齐用flex-end
• 不需要子元素间距的话，直接删掉gap属性即可

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