I'm learning how to utilize flex and just started running into issues for after the flexbox is completed...

#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 >
        <div id="initialMenuHeader"  onclick="menuCollapsable(this)">&Delta;</div>
        <div id="initialMenuHVQ"  onclick="initialHVQ()">Hivecoin</div>
        <div id="initialMenuRVN"  onclick="initialRVN()">Ravencoin</div>
        <div id="initialMenuAVN"  onclick="initialAVN()">Avian</div>
    </div>
    <div >
        <h1>NAME OF POOL GOES HERE</h1>
        <p >¡Intro crap will go here!</p>
    </div>
</div>

As it stands, my .menu looks like this. Please note that the image is uncensored and includes expletives

Everything I could find online suggests that when the flex-box is completed, it should go back to the normal flow (e.g. not floating).

Please let me know what I'm doing wrong and/or missing.

JSFiddle of my code (added some things that I didn't include above like body for background-color and color

CodePudding user response：

Since you make #initial as flex, and by default flex-direction set to row your menu align with with your body. If your want menu & body in 2 lines add below css:

#initial{
   flex-direction: column;
}