Css 无法使flex flow:行工作

我有一个页面使用flex来调整布局

这里是通往它的捷径：

我的问题是为什么黄色div在蓝色div的左边？ 我想要的是蓝色div顶部的黄色div；在对话框上，容器应该可以实现这一点

#柔性容器{
身高：100%；
宽度：100%；
背景颜色：黄色；
显示器：flex；
弯曲方向：立柱；
柔性包装：nowrap；
}
#排顶{
背景色：红色；
flex:01100px；
显示器：flex；
柔性流：行；
}
#罗维森{
背景色：青色；
flex:1自动；
显示器：flex；
}
#排底{
背景颜色：绿色；
flex:01100px；
}
#孔杜多{
flex：自动；
背景颜色：蓝色；
}
#左上角{
背景色：白色；
flex:01100px；
}
#中校{
背景色：#ffc0cb；
flex:1自动；
}
#右上角{
背景色：蓝紫色；
flex:01100px；
}
#对话框容器{
背景色：黑色；
宽度：96%；
左缘：2%；
保证金权利：2%；
边缘顶部：10px；
边缘底部：10px；
显示器：flex；
柔性流：行；
柔性包装：nowrap；
}
#对话内容{
背景颜色：黄色；
flex:1自动；
}
#对话框文本{
背景颜色：蓝色；
flex:0150px；
}

AAA
BBB
CCC
DCDC
DTDT
DDD

使用

flex-flow:row

将使您的div在同一行中。如果您需要一个在另一个之上，您应该改为使用

flex-flow:column

作为旁注：该属性是柔性方向和柔性包裹属性的速记属性。在您的情况下，仅被视为采用默认值

#柔性容器{
身高：100%；
宽度：100%；
背景颜色：黄色；
显示器：flex；
弯曲方向：立柱；
柔性包装：nowrap；
}
#排顶{
背景色：红色；
flex:01100px；
显示器：flex；
柔性流：行；
}
#罗维森{
背景色：青色；
flex:1自动；
显示器：flex；
}
#排底{
背景颜色：绿色；
flex:01100px；
}
#孔杜多{
flex：自动；
背景颜色：蓝色；
}
#左上角{
背景色：白色；
flex:01100px；
}
#中校{
背景色：#ffc0cb；
flex:1自动；
}
#右上角{
背景色：蓝紫色；
flex:01100px；
}
#对话框容器{
背景色：黑色；
宽度：96%；
左缘：2%；
保证金权利：2%；
边缘顶部：10px；
边缘底部：10px；
显示器：flex；
柔性流动：柱；
柔性包装：nowrap；
}
#对话内容{
背景颜色：黄色；
flex:1自动；
}
#对话框文本{
背景颜色：蓝色；
flex:0150px；
}

AAA
BBB
CCC
DCDC
DTDT
DDD