如何使用flexbox和css垂直排列元素

我的HTML中有三个元素，我想垂直排列（如果愿意，可以堆叠），而不管大小（对于某些元素来说，这是动态的）

我试过使用flexbox和网络上的常用建议，但似乎不起作用

.intro{
字体系列：monospace；
字体大小：24px；
颜色：#455934；
填充顶部：25px；
右边填充：50px；
垫底：5px；
左侧填充：50px；
自我校准：灵活启动；
}
.食谱{
背景色：rgba（255、255、255、.6）；
保证金：自动；
最小高度：400px；
高度：自动！重要；
高度：400px；
宽度：75%；
框大小：边框框；
显示器：flex；
显示：-ms flexbox；
显示：-webkit flex；
弯曲方向：立柱；
-webkit柔性方向：列；
调整项目：灵活启动；
-webkit对齐项：flex开始；
对正内容：左；
}
.配方a：链接，
答:访问,，
a:主动的{
颜色：#cda44c；
字体系列：monospace；
字号：18px；
垫面：5px；
右边填充：50px；
垫底：5px；
左侧填充：50px；
自我校准：灵活启动；
}
.食谱a：悬停{
颜色：白色；
自我校准：灵活启动；
}
.u图像{
垫面：5px；
}

{{label}}

如果您只是想让它们堆叠起来，为什么要使用flex？您的html代码应该按原样堆叠它们，而不向父级添加其他样式。同样在您的站点上，您还没有应用flex-direction@Pete没错，这确实解决了问题。我采用了flex的样式，它来自于之前的一个类似的容器，但是可以包含更多应该用flex包装的元素。