Soy nueva en Flexbox. Necesito hacer un Header con Flexbox y me he quedado un poco atascada con ello. He intentado varias formas pero no consigo averigüar el cómo hacerlo.
Lo que quiero hacer es un Header igual que el de esta web (facilito el enlace ya que no puedo incluir imágenes por aquí, y va a ser mas sencillo así que explicarlo por escrito)
https://www.dentrodellapicero.com
Este es mi código HTML, como veis he creado 3 divs en el Header. EL primer div contiene el logo, el segundo div contiene un nav(log in y carrito) y el tercer div contiene otro nav con el resto de enlaces.
Código HTML
<div class="contenedor">
<header>
<div class="logo"><img src="./assets/logo.png" alt="logo"></div>
<nav>
<div class="nav2">
<router-link class="nav21" to="/">Log In</router-link>
<router-link to="/carritoCompra">Carrito</router-link>
</div>
</nav>
<nav>
<div class="nav1">
<router-link to="/">Home</router-link>
<router-link to="/tiendashop">Tienda/shop</router-link>
</div>
</nav>
</header>
<router-view/>
Código CSS
#contenedor {
background: #ccc;
width:90%;
max-width: 1000px;
margin: auto;
/* Flex */
display:flex;
flex-direction:row;
flex-wrap:wrap;
}
header{
height: 90px;
width: 100%;
padding: 20px;
/* Flex */
display: flex;
justify-content:center;
flex-direction:row;
flex-wrap:wrap;
}
nav{
width:100%;
}
.nav1 {
display:flex;
align-self:center;
justify-content: center;
}
.nav2 {
width:50%;
display: flex;
justify-content:flex-end;
align-items:center;
}
.nav21 {
padding-right:40px;
}
.logo img{
width:20%;
}