我的flexbox不会居中

Question

我目前正在尝试学习如何制作网站，我刚刚开始测试flexbox，但我无法弄清楚如何将红色框放在中心位置：

我查看了一个非常明确的指南（https://css-tricks.com/snippets/css/a-guide-to-flexbox/），我想我只需要使用justify-content：center。但我很谨慎做错事请帮忙。

P.S。全屏运行代码段，否则您将看不到问题。

* {
  margin: 0px;
  padding: 0px;
}
.flex_container {
  display: flex;
  flex-flow: row wrap;
  border: 5px solid blue;
}
header,
section,
footer,
aside,
nav,
article {
  display: block;
}
body {
  justify-content: center;
  border: 5px solid grey;
}
#top_menu {
  text-align: center;
  width: 100%;
  height: 40px;
  padding: 10px;
  border: 5px solid green;
}
#top_menu li {
  list-style: none;
  font: 20px helvetica;
  color: green;
  display: inline;
}
main {
  padding: 20px;
  max-width: 1000px;
  border: 5px solid red;
}

<div class="flex_container">
  <nav id="top_menu">
    <ul>
      <li>Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
    </ul>
  </nav>
</div>
<main>
  Sample text
</main>

Answer 1

您可以在margin: 0 auto;元素上使用main，因为它不是Flexbox。

见下面的例子：

* {
  margin: 0px;
  padding: 0px;
}
.flex_container {
  display: flex;
  flex-flow: row wrap;
  border: 5px solid blue;
}
header,
section,
footer,
aside,
nav,
article {
  display: block;
}
body {
  justify-content: center;
  border: 5px solid grey;
}
#top_menu {
  text-align: center;
  width: 100%;
  height: 40px;
  padding: 10px;
  border: 5px solid green;
}
#top_menu li {
  list-style: none;
  font: 20px helvetica;
  color: green;
  display: inline;
}
main {
  padding: 20px;
  max-width: 1000px;
  border: 5px solid red;
  margin: 0 auto;
}

<div class="flex_container">
  <nav id="top_menu">
    <ul>
      <li>Tab 1</li>
      <li>Tab 2</li>
      <li>Tab 3</li>
    </ul>
  </nav>
</div>
<main>
  Sample text
</main>

Answer 2

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