Html Flexbox-并排的行和列

我试图实现的是：

但是，我在完成最后一个块/矩形（红色）时遇到了麻烦。 因为它不属于我为其他块创建的行。 我试着往右转，但没有成功

如何实现最后一个红色块/矩形

我正在使用Flexbox作为容器

当前代码：

.container{
显示器：flex；
柔性包装：包装；
}
#包装纸{
右边距：自动；
左边距：自动；
宽度：1520px；
}
.行{
弯曲方向：行；
}
.栏目{
弯曲方向：立柱；
}
#日期和时间{
宽度：450px；
高度：270px；
背景色：#0dab76；
右边距：40px；
}
.底部{
边缘顶端：40px；
}
#预测{
宽度：450px；
高度：270px；
背景色：#143642；
}
#新闻{
背景色：#a8201a；
宽度：230px；
高度：100px；
左边距：40px；
}
#头衔{
背景色：#ec9a29；
宽度：650px；
高度：270px；
左边距：40px；
}
#没有{
背景色：#0f8b8d；
宽度：250px；
高度：270px；
}

仪表板

您可以再添加一个包装器，然后创建两列，如下所示：

#主包装器{
显示器：flex；
}
#红色的{
宽度：200px；
高度：计算（270px*2+40px）；
背景色：红色；
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
许可证：无（公共域）
*/
html，
身体，
分区，
跨度
小程序，
对象
iframe，
h1，
h2，
h3，
h4，
h5，
h6，
P
块引用，
之前，
A.
缩写，
缩略语
地址:，
大的
引用，
代码，
德尔，
dfn，
相对长度单位，
img，
ins，
kbd，
Q
s
桑普，
小的
罢工
坚强的
附属的，
啜饮，
tt，
var，
B
U
我
居中
dl，
dt，
dd，
ol,，
ul，
锂，
字段集，
形式，
标签，
传奇
桌子
说明文字
t身体，
特富特，
thead，
tr，
th，
运输署，
文章
在一边
帆布，
细节，
嵌入
图形
figcaption，
页脚，
标题，
hgroup，
菜单，
导航，
产出，
红宝石，
第节，
总结，
时间
做记号
音频
录像带{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
文章
在一边
细节，
figcaption，
图形
页脚，
标题，
hgroup，
菜单，
导航，
部分{
显示：块；
}
身体{
线高：1；
}
ol,，
保险商实验室{
列表样式：无；
}
块引用，
q{
报价：无；
}
blockquote：之前，
blockquote：之后，
问:以前,，
问：之后{
内容：''；
内容：无；
}
桌子{
边界塌陷：塌陷；
边界间距：0；
}
身体{
填充顶部：130px；
}
.集装箱{
显示器：flex；
柔性包装：包装；
}
#包装纸{
右边距：自动；
左边距：自动；
宽度：940px；
}
.行{
弯曲方向：行；
}
.栏目{
弯曲方向：立柱；
}
#日期和时间{
宽度：450px；
高度：270px；
背景色：#0dab76；
右边距：40px；
}
.底部{
边缘顶端：40px；
}
#预测{
宽度：450px；
高度：270px；
背景色：#143642；
}
#新闻{
背景色：#a8201a；
宽度：230px；
高度：100px；
左边距：40px；
}
#头衔{
背景色：#ec9a29；
宽度：650px；
高度：270px；
左边距：40px；
}
#没有{
背景色：#0f8b8d；
宽度：250px；
高度：270px；
}

仪表板

一般来说，您需要两列……结构很重要

根据需要进行调整

*{
保证金：0；
填充：0；
框大小：边框框；
}
：：之前，
：：之后{
框大小：继承；
}
.集装箱{
显示器：flex；
柔性包装：包装；
}
#包装纸{
宽度：416px；
显示器：flex；
}
.左{
弹性：2；
显示器：flex；
证明内容：之间的空间；
保证金权利：4px；
}
.对{
弹性：1；
背景：红色；
}
#日期和时间{
宽度：135px；
高度：81px；
背景色：#0dab76；
利润底部：4倍；
}
#预测{
宽度：135px；
高度：81px；
背景色：#143642；
}
#新闻{
背景色：#a8201a；
宽度：69px；
高度：30px；
}
#头衔{
背景色：#ec9a29；
宽度：195px；
高度：81px；
}
#没有{
背景色：#0f8b8d；
宽度：75px；
高度：81px；
}

考虑到结构，flexbox并不理想。。考虑CSS GRIDFION FRASBOX，这不是两行，它是两列……从那里开始。@ PaulIExd，但块大小不同，这不是问题吗？每个Frasbox容器可以有行或列，而不是两者。flex元素不能跨越多个行/列。对于您的案例，一个可能的解决方案可能是嵌套flexbox结构，外部容器包含2个项目（右侧橙色边栏和其他所有内容），内部容器包含2行，每行包含2个项目。如何使用网格设置块的大小？