1

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%;
}

3 respuestas 3

0

Una posible solución sería incluir el logo y la navegación de login y carrito dentro de un contenedor flexible para que no fluyan con la navegación principal. En el ejemplo que das se incluye un tercer elemento antes del logo con lo que solamente se tendría que aplicar un 100% a cada uno de estos tres elementos y aplicar el text-align correspondiente en cada caso. Al contenedor de estos tres elementos se le aplicaría la propiedad display display:flex y align-content: space-between.

0

Solución sencilla, solo te faltaría agregar tus estilos para darle el look and feel que deseas

.flex {
  display: flex;
}

.flex > * {
  margin: 0 5px;
}

.justify-between {
  justify-content: space-between;
}

.centered {
  align-items: center;
  justify-content: center;
}

.sticky {
  position: fixed;
  width: 100%;
}
<div style="height: 900px;">
  <header>
    <!-- Redes Sociales y Login-Carrito -->
    <div class="flex justify-between sticky">
      <div class="flex">
        <div>FACEBOOK</div>
        <div>INSTAGRAM</div>
      </div>
      <div class="flex">
        <div>LOGIN</div>
        <div>CARRITO</div>
      </div>
    </div>
    <!-- Logo -->
    <div class="flex centered">
      <div>LOGO</div>
    </div>
  </header>
</div>

0

Yo lo haría de forma estructurada, crearía un div row que tenga la propiedad flex y crearía varios columns con los tamaños deseados, de esa forma puedes usar la misma estructura mas de una vez.

Aquí un ejemplo de como lo haría yo.

* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-size: 18px;
    }
    header {
        width: 95%;
        margin: auto;
        max-width: 1200px;
    }
    a {
        text-decoration: none;
    }
    a:hover {
        color: #ffc824;
    }
    ul {
        list-style: none;
    }
    ul li {
        display: inline-block;
        vertical-align: middle;
        margin: 0px 10px;
    }
    ul li a {
        color: #000;
    }
    .text-center {
        text-align: center;
    }
    .text-left {
        text-align: left;
    }
    .text-right {
        text-align: right;
    }
    .row {
        width: 100%;
        display: flex;
        align-items: center;
    }
    .column {
        display: inline-block;
        vertical-align: middle;
        padding: 20px 0px;
    }
    .col4 {
        width: 33.33%;
    }
    .navigation  {
        margin: auto;
    }
    .active {
        color: #ffc824;
    }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FlexBox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/effdfd5bb9.js"></script>
</head>
<body>

    <header class="header">
        
        <div class="row">

            <div class="column col4 text-left">
                <ul class="socials">
                    <li><a href="#"><i class="fab fa-facebook"></i></a></li>
                    <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                </ul>
            </div>

            <div class="column col4 text-center">
                <img src="https://static.wixstatic.com/media/ff5b44_bfe6765108684d188da2535c7ecc4004~mv2.png/v1/fill/w_119,h_79,al_c,q_85,usm_0.66_1.00_0.01/LOGO.webp">
            </div>

            <div class="column col4 text-right">
                <ul class="user-menu">
                    <li><a href="#">Log In</a></li>
                    <li><a href="#"><i class="fas fa-shopping-cart"></i> Carrito <span class="counter">0</span></a></li>
                </ul>
            </div>

        </div>

        <div class="row">
            <div class="navigation text-center">
                <nav>
                    <ul>
                        <li><a href="#" class="active">Home</a></li>
                        <li><a href="#">Tienda/Shop</a></li>
                        <li><a href="#">Nosotros</a></li>
                        <li><a href="#">Proceso</a></li>
                        <li><a href="#">Contact</a></li>
                        <li><a href="#">OUTLET</a></li>
                    </ul>
                </nav>
            </div>
        </div>

    </header>

</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.