0

Olá... galera estou começando a trabalha com flexbox só que estou com um problema ao fazer um menu, segue o codigo css:

.header{
width:  100%;
height: 100vh;
background-image: url(../img/backgrounds/bg1.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

.header .header_content{
    max-width: 1366px;
    margin: 0 auto;
    display: flex;
    /*justify-content: space-between;*/
}
.header .header_content .logo{
    flex-basis: 247px;
    padding: 20px;
    width: 207px;
}

.header .header_content .header_content_nav{
    flex-basis: calc(100% - 247px);
    display: flex;
    justify-content: flex-end;
}
.header_content_nav .menu{
    display: flex;
    align-items: stretch;
}
.header_content_nav .menu li{
    list-style: none;
    display: flex;
    align-items: center; 
    margin: 0 15px;

}
.header_content_nav .menu li a{
    color: #ffffff;
    height: 100%;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration:  none;
    font-size: 0.9em;
}



.header_content_nav .social_telefone{
    display: flex;
    align-items: stretch;
 }

HTML:

<header class="header">
            <div class="header_content">

                <div class="logo">
                    <a>
                        <img src="logo_med.png" width="207"/>
                    </a>
                </div>
                <!--FECHA DIV LOGO-->
                <nav class="header_content_nav">
                       <ul class="social_telefone">
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                        </ul>-->
                        <ul class="menu">
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                           <li><a href="./">link</a></li>
                        </ul>
                </nav>
            </div>
        </header>

Só que fica errado, o social fica a esquerda e nao em cima do menu! queria algo assim: inserir a descrição da imagem aqui

Agradeço!

8
  • Com o CSS e o HTML da pergunta não foi possível reproduzir o problema.
    – Sam
    Commented 2/06/2018 às 23:08
  • Sim, o problema eu coloquei na pergunta, fica a esquerda do menu, o social_telefone, queria ele em cima. Commented 2/06/2018 às 23:33
  • JASL o que ele quis dizer é que o CSS que vc colocou na pergunta não é o CSS completo que precisamos para simular o erro igual ao da imagem que vc postou. Por favor verifique se vc colocou na pergunta o CSS correto, e coloque ele completo!
    – hugocsl
    Commented 2/06/2018 às 23:39
  • Amigo isto que vc está propondo com Flexbox é praticamente impossível de se fazer, ele trabalha com row ou colums qualquer uma que vc escolher não obterá o resultado esperado como o da foto. Vc não conseguirá colocar duas divs uma em cima da outra, como a social e a menu com Flexbox.
    – LeAndrade
    Commented 2/06/2018 às 23:57
  • @hugocsl o css completo é esse mesmo iniciei hoje o desenvolvimento e já cair nesse problema. Commented 2/06/2018 às 23:59

2 Respostas 2

1

O melhor caminho é sempre as flexbox e/ou grids, a não ser que o usuário final do seu sistema necessite de algo compatível com navegadores antigos... não entendi muito bem o objetivo da pergunta, caso queira reproduzir o resultado da imagem pode fazer dessa forma...

body {
  margin: 0;
}
.header_content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #555;
}
.header_content_nav {
  display: flex;
  flex-direction:column;
  align-items: flex-end;
}
.header_content_nav ul {
  list-style: none;
  margin:0;
  padding:0;
}
.header_content_nav ul li a {
  text-decoration: none;
  color: white;
  font-size: 10px;
}
.social_telefone {
  display: flex;
  justify-content: space-between;
  width: 170px;
}
.menu {
  display: flex;
  justify-content: space-between;
  height: 20px;
  align-items: flex-end;
  width: 250px;
}
<header class="header">
            <div class="header_content">

                <div class="logo">
                    <a>
                        <img src="https://fakeimg.pl/185x60/"/>
                    </a>
                </div>
                <!--FECHA DIV LOGO-->
                <nav class="header_content_nav">
                       <ul class="social_telefone">
                           <li><a href="./">FACEBOOK</a></li>
                           <li><a href="./">TELEFONE</a></li>
                           <li><a href="./">LOGIN</a></li>
                        </ul>
                        <ul class="menu">
                           <li><a href="./">HOME</a></li>
                           <li><a href="./">SERVIÇOS</a></li>
                           <li><a href="./">BLOG</a></li>
                           <li><a href="./">PRODUTOS</a></li>
                           <li><a href="./">CONTATO</a></li>
                        </ul>
                </nav>
            </div>
        </header>

1
1

O código que colocou não é suficiente para reproduzir o problema, vou deixar um código para você se basear

Esse site explica bem o uso do flexbox

header, header * {
  display: flex;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}

header {
  padding: 10px;
  line-height: 50px;
  background: #000;
}

header img {
  height: 50px;
}

header nav ul {
  list-style: none;
}

header nav ul li a {
  text-decoration: none;
  color: #FFF
}
<header>
  <img src="http://www.cubejs.org/docs/images/placeholder_200x100.svg">

  <nav>
    <ul>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
    </ul>
  </nav>
  
  <nav>
    <ul>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
      <li><a href="./">link</a></li>
    </ul>
  </nav>
</header>

3
  • Já havia pesquisado nesse site antes de fazer a pergunta, infelizmente não encontrei a solução! Commented 3/06/2018 às 3:29
  • Foi o melhor site que encontrei quando comecei a aprender flexbox
    – Costamilam
    Commented 3/06/2018 às 3:57
  • sim, é muito bom. é que na verdade eu estava querendo usar flex em tudo e não a necessidade, resolvi o problema tirando o flex do nav e coloquei um display: inline-flex; nos filhos. Commented 3/06/2018 às 4:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .