1
respuesta

[MI SOLUCIÓN] Agregando espacio con Flexbox

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Introducción al Flexbox y haciendo el encabezado y actividad Agregando espacio con Flexbox

por felipenavbar
| 83.6k xp | 28 posts
Desarrollador de software 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
  #img-logo{
    width: 50px;
    height: 50px;
  }

  .encabezado{
    display: flex;
    justify-content: space-between;
    
  }

  .menu{
    width: 70%;
  height: auto;
    display: flex;
    justify-content: space-between;
    
  }

  .menu .menu-item{
    list-style: none;
  }

</style>
<body>
    <header class="encabezado">
        <a class="logo" href="#">
          <img id="img-logo" src="https://www.aluracursos.com/assets/api/cursos/flexbox-posicione-elementos-pantalla.svg">
        </a>
      
        <ul class="menu">
          <li class="menu-item">Item 1 del menu</li>
          <li class="menu-item">Item 2 del menu</li>
          <li class="menu-item">Item 3 del menu</li>
          <li class="menu-item">Item 4 del menu</li>
        </ul>
      </header>   
</body>
</html>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Felipenavbar!

Gracias por compartir tu solución con nosotros. En cuanto a tu pregunta, si lo que deseas es agregar un espacio entre el logo y el menú, puedes hacerlo utilizando la propiedad margin-right en el logo y margin-left en el menú. Por ejemplo:

.logo {
  margin-right: 20px;
}

.menu {
  margin-left: 20px;
}

De esta manera, estarás agregando un espacio de 20 píxeles entre el logo y el menú. También puedes ajustar el valor de los márgenes según tus necesidades.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)