如何为Flex布局方向切换添加平滑过渡效果

我有一个包含两个子元素child1和child2的父容器，父容器的display属性设置为flex，方向为row；但在屏幕尺寸大于768px时，我希望将其flex方向改为flex-col。如何为该布局变化添加平滑过渡效果，使得当屏幕尺寸增大至768px及以上时，flex方向的变化能够平滑过渡而非突然切换？

原始代码（含错误修正） #

首先修正你代码里的小问题：CSS中重复定义了.child1，第二个应该是.child2：

<style>
    .parent {
        display: flex;
        transition: all 0.3s;
    }
    .child1, .child2{
        width: 100px;
        height: 100px;
    }
    .child1{
        background:red;
    }
    .child2{
        background:blue;
    }
    @media (min-width: 768px) {
        .parent {
            flex-direction: column;
        }
    }
</style>

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

解决方案：模拟flex方向切换的平滑过渡 #

flex-direction属于离散枚举属性，无法直接用CSS过渡实现平滑变化，需要通过可过渡的数值属性模拟布局切换效果，以下是两种可行方案：

方案1：通过容器宽度+flex-wrap实现自然过渡

利用flex换行特性，过渡容器宽度让子元素从并排变为堆叠：

.parent {
  display: flex;
  flex-wrap: wrap;
  /* 初始宽度刚好容纳两个子元素并排 */
  width: 200px;
  transition: all 0.3s ease;
}

.child1, .child2 {
  width: 100px;
  height: 100px;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

@media (min-width: 768px) {
  .parent {
    /* 缩小容器宽度，触发子元素换行 */
    width: 100px;
  }
}

当屏幕宽度达到768px时，父容器宽度从200px平滑过渡到100px，子元素自然从横向排列变为纵向堆叠，视觉上实现类似flex-direction切换的平滑效果。

方案2：结合transform实现位置过渡

通过对子元素添加位移和透明度的过渡，模拟布局切换的流畅感：

.parent {
  display: flex;
  transition: all 0.3s ease;
}

.child1, .child2 {
  width: 100px;
  height: 100px;
  transition: all 0.3s ease;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

@media (min-width: 768px) {
  .parent {
    flex-direction: column;
  }
  .child2 {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .child2 {
    transform: translateY(-100%);
    opacity: 0;
  }
}

这种方式通过子元素的位移和透明度变化，让布局切换的过程更柔和，适合追求特殊视觉效果的场景。

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