Css flexbox复杂布局，无需重复flexbox容器div

我很难创建这个布局，下面是我想用flexbox实现的布局

我试过了，但这是我得到的结果。 有人能帮你找到正确的方向吗

.flex{
显示器：flex；
柔性流：行换行；
对齐内容：之间的空间；
宽度：100%；
}
.灵活儿童{
宽度：30%；
边框：1px实心#000；
高度：100px；
}
.flex子项：第n个子项（1）{
顺序：1；
}
.flex子项：第n个子项（2）{
顺序：2；
高度：48px；
柔性流：柱包裹；
}
.flex子项：第n个子项（3）{
顺序：3；
高度：48px；
柔性流：柱包裹；
}
.flex子项：第n个子项（4）{
顺序：4；
}
.flex子项：第n个子项（5）{
顺序：5；
宽度：60%；
高度：150像素
}
.flex儿童：第n个儿童（6）{
顺序：6；
高度：48px；
}
.flex儿童：第n个儿童（7）{
订单：7份；
高度：48px；
}
.flex儿童：第n个儿童（8）{
订单：8份；
高度：48px；
}
.flex子项：第n个子项（9）{
顺序：9；
}
.flex儿童：第n个儿童（10）{
订单：10份；
宽度：50%；
}
.flex儿童：第n个儿童（11）{
订单：11份；
宽度：50%
}

儿童1
儿童2
儿童3
儿童4
儿童5
儿童6
儿童7
儿童8
儿童9
儿童10
儿童11

这可以使用CSS网格实现。我真的建议你调查一下，因为这可能有点让人困惑。读一读关于你自己的书只会对你有好处，因为一旦你想改变什么，你可能会遇到麻烦

CSS技巧做出了一个非常引人注目和彻底的决定。给它一个通读，你应该能够重新创建自己

.flex{
显示：网格；
网格模板列：重复（1fr，6）；
网格模板行：自动；
网格模板区域：
“儿童1儿童1儿童2儿童2儿童4儿童4”
“儿童1儿童1儿童3儿童3儿童4儿童4”
“儿童5儿童5儿童5儿童5儿童6儿童6”
“儿童5儿童5儿童5儿童5儿童7儿童7”
“儿童5儿童5儿童5儿童5儿童8儿童8”
“儿童9儿童9儿童9儿童10儿童10儿童10”
“儿童9儿童9儿童9儿童10儿童10儿童10”；
栅隙：10px；
宽度：100%；
最小高度：400px；
}
.灵活儿童{
边框：1px实心#000；
}
.灵活儿童{
宽度：100%；
身高：100%；
}
.flex子项：第n个子项（1）{网格区域：child1；}
.flex子项：第n个子项（2）{网格区域：child2；}
.flex子项：第n个子项（3）{网格区域：child3；}
.flex子项：第n个子项（4）{网格区域：child4；}
.flex子项：第n个子项（5）{网格区域：child5；}
.flex子项：第n个子项（6）{网格区域：child6；}
.flex子项：第n个子项（7）{网格区域：child7；}
.flex子项：第n个子项（8）{网格区域：child8；}
.flex子项：第n个子项（9）{网格区域：child9；}
.flex子项：第n个子项（10）{网格区域：child10；}

儿童1
儿童2
儿童3
儿童4
儿童5
儿童6
儿童7
儿童8
儿童9
儿童10

如果您想在不重构HTML的情况下实现这一点，我建议您使用CSS网格而不是flexbox。否则，儿童2/3需要一个父div，儿童6/7/8需要单独包装，并且FlexBox在一个主方向上“工作”，因此在不引入任何额外包装元素的情况下，您将很难实现这一点。正如Jason所说，grid更适合于此。如果不重复flexbox容器div，就无法完成。正如其他人所说，Flexbox在一维中工作。你需要使用a）网格，或b）重复你的包装。