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:
Agradeço!