Cómo hacer una barra de navegación con display:flex.

639

Las barras de navegación son algo que nos encontramos en casi todas las páginas web. Hacer una es bastante sencillo e importante al momento de maquetar con HTML y CSS. Aqui te enseño como hacerlo, con la ayuda de la propiedad display:flex.

Paso 1: Configura tu estructura HTML

Primero, crea la estructura HTML para tu barra de navegación. En este ejemplo, utilizaremos una lista desordenada <ul> para representar los elementos de la barra de navegación y luego cada elemento de la lista en un <li>

<!DOCTYPE html><html><head><linkrel="stylesheet"type="text/css"href="style.css"></head><body><nav><ul><li><ahref="#">Inicio</a></li><li><ahref="#">Acerca de</a></li><li><ahref="#">Servicios</a></li><li><ahref="#">Contacto</a></li></ul></nav></body></html>

Paso 2: Estilo con CSS

A continuación, crea un archivo CSS para aplicar estilos a la barra de navegación. En este ejemplo, utilizaremos display: flex para alinear los elementos de la lista en línea horizontalmente.

*{
    margin: 0;
    padding: 0;
}


nav {
    background-color: #333;
}

ul {
    list-style-type: none;
    display: flex;
    justify-content: space-around; /* Distribuye los elementos equitativamente */padding: 0;
}

li {
    margin: 0;
    padding: 10px;
}

a {
    text-decoration: none;
    color: #fff;
}

li:hover{
  transition: 250ms;
  background-color: #000000;
}

Paso 3: Vincula el archivo CSS

Asegúrate de vincular el archivo CSS que creaste en el paso anterior al archivo HTML en la sección <head> del documento.
.
Paso 4: Prueba tu barra de navegación
Abre el archivo HTML en un navegador para ver tu barra de navegación con display: flex. Deberías ver los elementos de la barra de navegación alineados horizontalmente y con espacios equitativos entre ellos.
.
Este es un ejemplo básico de cómo crear una barra de navegación simple con display: flex. Puedes personalizar aún más el diseño y los estilos según tus necesidades. ¡Espero que esto te ayude a empezar!

hace un año