Alignment with flex box

Question

I need the image to be positioned on the left until the menu activates its " responsibility " ( and then it normally becomes ), but I tried to add it in another field but the menu broke, I tried to centralize it but it didn’t work ... I am starting now with flex box so I would appreciate if you could help me.

    .hdgeral {
        background: red;
        width: 100%;
    }
    
    header {
        height: 20%;
        width: 100%;
    }
    
    nav {
        display: flex;
        justify-content: flex-end;
        padding: 2em;
    }
    
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }
    
    a {
        position: relative;
        display: inline-block;
        padding: 1em;
        text-decoration: none;
        color: #000;
    }
    
    @media all and (max-width: 800px) {
      ul {
        flex-grow: 1;
        justify-content: space-around;
      }
    }
      
    @media all and (max-width: 600px) {
      ul {
        flex-direction: column;
        align-items: center;
        width: 100%;
      }
    }

<header class="hdcentral">

  <nav>				

    <ul>
      <li><a href=""><img src="http://placehold.it/350x150"></a></li>
      <li><a href="#Empresa" target="_self" title="Sobre nossa empresa">Empresa</a></li>
      <li><a href="#Servicos" target="_self" title="Serviços fornecidos">Serviços</a></li>
      <li><a href="#Mapa" target="_self" title="Nossa locação">Mapa</a></li>
      <li><a href="#Contato" target="_self" title="Formulário de contato">Contato</a></li>
    </ul>

  </nav>

</header>

Answer 1

From what I understood the menu and submenu would need a container for the property Justify-content

ul{
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding:0;
  margin:0;
}

.subMenus {
  display: flex;
}
.subMenus > li >a {
  padding:5px;
  text-decoration: none;
  color: #000;
}
div{
  display: flex;

}

@media all and (max-width: 600px){
  ul {
    flex-direction: column;
  }
  div {
    justify-content: center;
  }
  .subMenus {
    flex-direction: column;
    align-items: center;
  }
}

<header class="hdcentral">

  <nav>				

    <ul>
      <div class="menu">
        <li><a href=""><img src="http://placehold.it/350x150"></a></li>
      </div>
      
      <div class="subMenus">
        <li><a href="#Empresa" target="_self" title="Sobre nossa empresa">Empresa</a></li>
        <li><a href="#Servicos" target="_self" title="Serviços fornecidos">Serviços</a></li>
        <li><a href="#Mapa" target="_self" title="Nossa locação">Mapa</a></li>
        <li><a href="#Contato" target="_self" title="Formulário de contato">Contato</a></li>
      </div>
      
    </ul>

  </nav>

</header>