Html 将顶栏添加到三列flexbox布局（实现Flex wrap）

我必须在屏幕上构建一个3列Flex布局

但我需要添加一个黑色顶部栏，如下所示：

我添加了一个代码，它在代码笔中有注释

我必须为此编写一个CSS，以便显示黑色顶部栏。我不知道怎么做。可能会使用某些换行属性或某些反向属性。请引导我

正文{
保证金：0；
}
标题，
页脚，
.内容{
显示器：flex；
}
.内容{
证明内容：之间的空间；
高度：75vh；
最大宽度：1500px；
保证金：自动；
}
梅因先生{
显示器：flex；
证明内容：之间的空间；
宽度：70.5%；
}
.小学{
宽度：27%；
背景颜色：黄色；
}
.文章{
背景颜色：蓝色；
宽度：71%；
顺序：2；
}
.中学{
背景颜色：粉红色；
宽度：25%；
顺序：1；
}
.页脚{
显示器：flex；
}

基本布局
这是一个标题位置
第二个边栏
主边栏
页脚区域

正文{
保证金：0；
}
标题，
页脚，
.内容{
显示器：flex；
}
.内容{
证明内容：之间的空间；
高度：75vh；
最大宽度：1500px；
保证金：自动；
}
梅因先生{
弹性：0.70.5%；
显示器：flex；
柔性包装：包装；
}
.顶{
弹性：0.100%；
背景色：黑色；
颜色：白色；
}
.中学{
背景颜色：粉红色；
弹性：0.25%；
顺序：1；
}
.文章{
背景颜色：蓝色；
弹性：1；
顺序：2；
}
.小学{
弹性：0.27%；
背景颜色：黄色；
}

这是一个标题位置
顶部区域
第二个边栏
主边栏
页脚区域

我只是想向您展示布局的概念。当然，你需要自己微调空间、高度、宽度等。啊，我明白了，所以基本上就是这个属性→ 柔性包裹：包裹下一行中的力→ flex-wrap:wrap如果您有

flex-wrap:wrap

，并且一个项目占用了100%的空间，这会强制其他项目换行。在上面的代码笔中，您只是缺少

.main

上的

flex-wrap:wrap

。默认值为

nowrap

。设置高度并使用

align content:space-between

：