Html 我的flexbox赢了'；t中心

我目前正在尝试学习如何制作网站，我刚刚开始测试flexbox，但我不知道如何将红色框居中：

我看了一本非常清晰的指南（），我想我必须使用justify content:center。但我很清楚我做错了什么，请帮忙

另外，全屏运行代码段，否则您将看不到问题

*{
边际：0px；
填充：0px；
}
.flex_容器{
显示器：flex；
柔性流：行换行；
边框：5px纯蓝色；
}
标题，
第节，
页脚，
在一边
导航，
文章{
显示：块；
}
身体{
证明内容：中心；
边框：5px纯灰；
}
#顶部菜单{
文本对齐：居中；
宽度：100%；
高度：40px；
填充：10px；
边框：5px纯绿色；
}
#上菜单{
列表样式：无；
字体：20px helvetica；
颜色：绿色；
显示：内联；
}
主要{
填充：20px；
最大宽度：1000px；
边框：5px纯红；
}

表1
表2
表3

示例文本

Flex只影响元素的子元素。红色框不在flex容器中，因此不会受到影响。

您可以使用

边距：0 auto在
主
元素上，因为它不是flexbox

见下例：


*{
边际：0px；
填充：0px；
}
.flex_容器{
显示器：flex；
柔性流：行换行；
边框：5px纯蓝色；
}
标题，
第节，
页脚，
在一边
导航，
文章{
显示：块；
}
身体{
证明内容：中心；
边框：5px纯灰；
}
#顶部菜单{
文本对齐：居中；
宽度：100%；
高度：40px；
填充：10px；
边框：5px纯绿色；
}
#上菜单{
列表样式：无；
字体：20px helvetica；
颜色：绿色；
显示：内联；
}
主要{
填充：20px；
最大宽度：1000px；
边框：5px纯红；
保证金：0自动；
}


表1
表2
表3

示例文本