Alignment with flex box

Question

Alignment with flex box

Navigation

#1 by (0 votes)

0

I need the image to be positioned on the left until the menu activates its "responsibility" (and then it centralizes normally), but I already tried to add it in another field but the menu broke, I tried to center it but it did not work ... I'm starting now with flex box so would appreciate it 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><ahref="#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>

css css3 flexbox

asked by anonymous 05.03.2017 / 01:27

1 answer

Associative Table of Companies and Users, Many for Many When filling ListView it is empty

score 0 · Answer 1

So I understand the menu and the submenu would need a container for the justify-content property

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><divclass="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>