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
Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

[Sugerencia] 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 Francisco Carvajal Gonzalez
| 88.4k xp | 13 posts
Coordinador Especializado

De inicio considero agregar un contenedor para que funcione y agregué un padding de 15px:

<!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>Agregando Espacio con flexbox</title>
    <link rel="stylesheet" href="css/espacio.css">
</head>
<body>
    <header class="encabezado">
      **  <div class="container">**
        <a class="logo" href="#">
          <img src="img/logo.png">
        </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>
    **</div>**
      </header>
</body>
</html>

y en el css:

.encabezado .container {

    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 15px;
}

saludos!

2 respuestas
solución!
por Rafaela Rocha
| 2875.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Francisco!

Gracias por compartir tu solución para agregar espacio con Flexbox. En efecto, agregar un contenedor y aplicar un padding es una buena forma de darle un poco de espacio a los elementos.

Solo me gustaría sugerirte que, en lugar de aplicar el padding directamente al contenedor, lo apliques al elemento interno que contiene los elementos del menú. De esta forma, el espacio extra solo se aplicará a los elementos del menú y no al logo, lo que puede ser más adecuado en algunos casos.

Por ejemplo, podrías hacer algo así:

.encabezado .menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

Espero que esta sugerencia te sea útil. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
por Francisco Carvajal Gonzalez
| 88.4k xp | 13 posts
Coordinador Especializado

Muchas gracias @Rafaela, la pondré en práctica.

saludos!