为什么在 flexbox 完成后新行不开始？

Question

我正在学习如何利用 flex 并刚刚开始运行解决在 flexbox 完成后的问题...

#initial {
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    align-items: center;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid white;
}

  #initial .menu {
      display: flex;
      flex: 1;
      justify-content: space-evenly;
      align-items: center;
      margin: 15px auto 15px auto;
      width: 1100px;
      border: 1px solid rgba(245, 245, 245, 0.699);
      border-radius: 50px;
      line-height: 2rem;
      font-size: 1.1rem;
      overflow: hidden;
  }

    #initial .menu .menuItem {
        display: flex;
        flex: 1;
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        text-align: center;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-evenly;
    }

    #initial .menu .menuItem:hover {
        background-color: #FDB000;
        color: black;
        cursor: pointer;
        display: flex;
        flex: 1;
        text-align: center;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-evenly;
    }

<div id="initial">
    <div class="menu">
        <div id="initialMenuHeader" class="menuItem" onclick="menuCollapsable(this)">&Delta;</div>
        <div id="initialMenuHVQ" class="menuItem" onclick="initialHVQ()">Hivecoin</div>
        <div id="initialMenuRVN" class="menuItem" onclick="initialRVN()">Ravencoin</div>
        <div id="initialMenuAVN" class="menuItem" onclick="initialAVN()">Avian</div>
    </div>
    <div class="body">
        <h1>NAME OF POOL GOES HERE</h1>
        <p class="intro">¡Intro crap will go here!</p>
    </div>
</div>

就目前而言，我的 .menu 看起来像 this。 请注意，图片未经审查且包含脏话

我在网上找到的所有信息都表明，当 flex-box 完成后，它应该回到正常流程（例如不浮动）。

请让我知道我做错了什么 and/or 遗漏了。

JSFiddle 我的代码（添加了一些我上面没有包含的东西，比如 body 用于 background-color 和 color

Answer 1

由于您将 #initial 设置为 flex，并且默认情况下 flex-direction 设置为 row，因此您的菜单与 body 对齐。如果您想要 menu & body 两行，请在下面添加 css:

#initial{
   flex-direction: column;
}

为什么在 flexbox 完成后新行不开始？

Why is a new line NOT starting after a flexbox is completed?

html

css

flexbox