Ejercicios de práctica de CSS

Ejercicio 14

Usar Flexbox para crear una barra de navegación con elementos distribuidos horizontalmente en pantallas grandes, y que se apilen verticalmente en pantallas pequeñas. No utilizaremos media queries, gracias a la redistribución de Flexbox.

Lo resolví del siguiente modo:

CSS:

            .navbar {
                display: flex;
                justify-content: space-around;
                background-color: #333;
                padding: 10px;                
                flex-wrap: wrap;
            }

            .navbar a {
                color: white;
                text-decoration: none;
                background-color: #999;
                padding: 10px;
                /* Flexbox se encargará de la redistribución de los elementos sin usar media queries */
                min-width: 400px;
            }

            
            

HTML:

            <div class="navbar">
                <a href="#">Inicio</a>
                <a href="#">Servicios</a>
                <a href="#">Nosotros</a>
                <a href="#">Contacto</a>
            </div>
           <p>Debes achicar la pantalla para ver el cambio</p>