我想在更改浏览器窗口大小时，当flexbox项目从一行transform到另一列时，对它们进行动画处理。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
display: flex;
flex-direction: row;
justify-content: space-around;
}
div {
background-color : red;
width:50px;
}
@media (max-width:500px) {
body {
flex-direction: column;
}
}
</style>
<body>
<div>
<p>1st block</p>
</div>
<div>
<p>2nd block</p>
</div>
<div>
<p>3rd block</p>
</div>
<div>
<p>4th block</p>
</div>
</body>
</head>
</html>
在这里，我有 4 个块，我想让它响应，但有一些使用transition属性的动画。请使用transition并解释我可以将这部分代码放在哪里。
你不能
只用CSS来做——flex-direction not animatable属性：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction。
查看 CSS3 可动画属性列表：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties。