Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

06 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 Oscar Daniel Martinez Martinez
| 84.3k xp | 33 posts
Encargado

Les comparto como lo hice 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>practica</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <header class="encabezado">
  <a class="logo" href="#">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWAwz5XkkFogrdlITP2yvzgtJfNF_kFTodv8BVlqU&s">
  </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>
.encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .menu{
    display: flex ;
  }
  .menu-item{
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    padding: 1%;
  }

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

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

¡Hola Oscar!

Gracias por compartir tu código y tu pregunta. Si entendí bien, tu pregunta es sobre cómo agregar espacio entre los elementos del menú usando Flexbox.

En tu código, ya estás utilizando la propiedad justify-content: space-between en el contenedor .encabezado para distribuir los elementos a lo largo del eje principal (horizontal) y agregar espacio entre ellos. Sin embargo, esta propiedad solo funciona entre el primer y último elemento, y no entre los elementos intermedios.

Para agregar espacio entre los elementos del menú, puedes utilizar la propiedad gap en el contenedor .menu. Esta propiedad define el espacio entre los elementos hijos de un contenedor con display flex.

Por ejemplo, si quieres agregar 20px de espacio entre los elementos del menú, puedes agregar la siguiente regla CSS:

.menu {
  display: flex;
  gap: 20px;
}

Con esta regla, habrá un espacio de 20px entre cada elemento del menú.

Espero que esto te ayude a resolver tu duda. Si tienes alguna otra pregunta, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!

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