Es decir, aquí le mostraré cómo usar los diseños de Flexbox para crear encabezados de alta calidad para sitios web. Compartiré algunos consejos y, al final, demostraré mi proyecto, creado específicamente para este material. Por lo tanto, si está realmente interesado en el tema que decidí plantear aquí, definitivamente debería leer este artículo hasta el final.
Aquí supongo que conoce los conceptos básicos del diseño de Flexbox. Aquí , por si acaso, está mi artículo escrito para aquellos que quieran aprender más sobre la propiedad CSS
flex.
Introducción
Primero, asegurémonos de que usted y yo llamemos al "encabezado del sitio" o al "encabezado del sitio" lo mismo. El encabezado del sitio es uno de los primeros elementos de la página que ve un usuario cuando visita un sitio. Por lo general, contiene el logotipo o el nombre del sitio, así como enlaces de navegación. Eche un vistazo a la siguiente figura.
Logotipo del sitio, enlaces de navegación y contenedor
de la parte del encabezado Independientemente del diseño de la parte del encabezado del sitio, sus elementos clave son el logotipo y la lista de enlaces.
Tecnología Flexbox en acción
Cuando el diseño del encabezado de un sitio se crea utilizando la tecnología Flexbox, todos los elementos del mismo nivel se alinean en una sola línea. Entonces todo lo que queda es usar la propiedad
justify-contentpara alinear los elementos distribuyendo el espacio libre entre ellos.
Aquí está el código de marcado:
<header class="site-header">
<a href="#" class="brand">Brand</a>
<nav class="nav"></nav>
</header>
Estos son los estilos:
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
No es nada complicado, ¿verdad? Bueno, para un titular tan simple, lo es. Pero en la práctica, las cosas pueden ser mucho más complicadas.
Contenedor de encabezado de página
El marcado de encabezado de página descrito en la sección anterior no contiene un elemento contenedor interno que contenga elementos que representen el logotipo y los enlaces de navegación. En pantallas grandes, utilizar este diseño puede resultar problemático.
Diseño de encabezado de página creado sin un contenedor interno (arriba) y usando un contenedor (abajo)
Observe que el encabezado de la primera página es demasiado ancho porque el contenedor interno no se usó cuando se creó. Pero el segundo diseño se ve mucho mejor. Por lo tanto, el código HTML del ejemplo anterior debe reescribirse de la siguiente manera:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
</div>
</header>
Y los estilos flexibles deben aplicarse al elemento
.site-header__wrapper:
.site-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
Usando la propiedad flex-wrap
Una propiedad
flex-wrapes una especie de mecanismo de seguridad CSS. Si el tamaño de la pantalla es pequeño, existe la posibilidad de que tenga que utilizar el desplazamiento horizontal para trabajar con la parte del encabezado de la página. Esto es lo que parece.
Para trabajar con el título de la página, debe utilizar el desplazamiento horizontal. El caso es que la propiedad flex-wrap no se usa aquí: wrap
Como puede ver, será inconveniente trabajar con una página así. ¡No te olvides de la propiedad
flex-wrap!
Explorando diferentes opciones de diseño para las secciones de encabezado de página
Lo que me gusta de los diseños de Flexbox es que facilitan la compatibilidad con diferentes opciones de diseño para las secciones de encabezado de las páginas. En esta sección, basado en el ejemplo anterior, voy a explorar las posibilidades de expandir el diseño agregándole nuevos elementos, como botones y campos de búsqueda. Inmediatamente, quiero explorar formas de cambiar el orden de visualización de los elementos secundarios del encabezado de la página.
▍ Variante número 1
Primera versión de la parte del encabezado de la página
Se agregó un botón a este diseño, colocado después del bloque de enlaces de navegación. ¿Cómo hacerlo? ¿Necesito diseñarlo como un enlace colocado dentro del elemento
<nav>? ¿O tal vez debería hacerse un elemento separado? Haré solo eso.
Aquí está el HTML para mi idea:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
En este caso, la distancia entre elementos no se puede establecer mediante la propiedad
justify-content: space-between. En su lugar, usaré la propiedad para alinear el bloque de enlaces margin-left: auto. Esto empujará enlaces y botones al lado derecho del contenedor.
Los elementos, gracias a margin-left: auto, se presionan en el lado derecho del contenedor.
Separar el botón del bloque de enlaces es valioso para diseños móviles, donde, por ejemplo, es posible que deba dejar el botón y presentar el bloque de enlaces como un menú desplegable.
Encabezado de página en computadoras de escritorio y dispositivos móviles
▍ Opción número 2
La segunda versión de la parte del encabezado de la página
Aquí hemos ampliado las capacidades de la parte del encabezado de la página agregando un campo de búsqueda. Ocupa el espacio libre que queda después de colocar otros elementos en la página. Con los diseños de Flexbox, esto se puede lograr aplicando la propiedad
flex.
Aquí está el marcado:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<div class="search"></div>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Este es el estilo aplicado al cuadro de búsqueda:
.search {
flex: 1;
}
¡Eso es todo! Ahora el campo llenará el espacio vacío entre el logo y el bloque de enlaces. Sin embargo, este enfoque tiene algunas limitaciones. En pantallas pequeñas, el encabezado de la página se verá a continuación.
Encabezado de página en una pantalla pequeña
El ancho del campo de búsqueda no debe ser inferior a un determinado tamaño. De lo contrario, será difícil ingresar texto en él. A continuación se presentan varias soluciones a este problema.
Resolviendo el problema causado por disminuir el ancho del campo de búsqueda en pantallas pequeñas
me gusta más la segunda opción, porque al usarla, el bloque de enlaces no se oculta demasiado pronto. En general, puedo decir que me esfuerzo por no ocultar el elemento en caso de que no interfiera con la visualización correcta del diseño.
▍ Opción número 3
La tercera versión de la parte del título
Este es el mismo marcado que la primera versión del título. Pero aquí se ha cambiado el orden de visualización de los elementos en la pantalla. ¿Cómo hacerlo? Puede decidir utilizar la propiedad aquí
order. Exploremos esta idea.
Aquí está el HTML:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<a href="/track-shipment" class="button">Track</a>
</div>
</header>
Estos son los estilos:
.site-header {
display: flex;
justify-content: space-between;
}
.nav {
order: -1;
}
Y así es como se ve el resultado de renderizar todo esto.
El uso de la propiedad justify-content: space-between no alinea el logotipo con el centro. Esta propiedad solo distribuye el espacio libre entre los elementos,
la solución a este problema es asignar cada elemento hijo al encabezado de la página con una propiedad
flex: 1. Esto distribuirá el espacio entre los elementos.
Estos son los estilos:
.brand,
.nav,
.button {
flex: 1;
}
Distribución uniforme del espacio libre entre los elementos de la parte del título de la página
Sin embargo, algo extraño sucedió con el botón. Debido a la aplicación de la propiedad
flex: 1, se ha vuelto demasiado largo. La única forma de solucionar esto es poner el botón en un elemento contenedor:
<header class="site-header">
<div class="wrapper site-header__wrapper">
<a href="#" class="brand"><img src="logo.svg" alt="brand" /></a>
<nav class="nav"></nav>
<div class="button-wrapper">
<a href="/track-shipment" class="button">Track</a>
</div>
</div>
</header>
Con este enfoque, puede alinear en el centro tanto el logotipo como el botón:
.logo {
text-align: center;
}
/* . - , , . */
.button-wrapper {
text-align: end; /* end - , LTR-, , right */
}
Elementos de alineación
Este enfoque, sin embargo, tampoco es ideal. Recuerde que si hay más enlaces en el bloque de navegación, generará problemas. Es decir, aquí es necesario que el ancho del bloque de navegación no exceda un cierto tamaño. Aquí hay un ejemplo en el que el logotipo pierde su alineación central.
El logo ya no está centrado
Como puedes ver en la imagen anterior el logo ya no está centrado. Vale la pena recordar esta característica del enfoque anterior para no enfrentar problemas inesperados.
Ahora que hemos explorado las diferentes opciones para diseñar diseños de encabezado para sitios web y hemos hablado sobre cómo crear dichos diseños, veamos algunas ideas importantes que pueden ayudarnos al crear secciones de encabezado para páginas.
Consejos para diseñar encabezados para páginas basadas en Flexbox
▍La propiedad de base flexible
Prefiero usar una propiedad
flex-basis: 100%cuando el elemento necesita ser de ancho completo en dispositivos móviles. Por ejemplo, si estamos hablando de un bloque importante de enlaces de navegación que no se pueden ocultar.
El resultado de aplicar la propiedad de base flexible es 100%.
Aplicar esta propiedad, si observa la figura anterior, puede parecer una cuestión sencilla. En realidad, este no es el caso. Normalmente, el encabezado de un sitio puede tener relleno, y si ajustamos el elemento para que ocupe todo el ancho, esto no sucederá hasta que el relleno se superponga. Sin embargo, eliminarlos no es práctico, ya que afectará a otros elementos del diseño.
He aquí cómo solucionar este problema:
- Agreguemos
flex: 1 0 100%al bloque de navegación. - Cambiemos, si es necesario, su propiedad
order. A veces también tenemos que cuidar otros elementos, por lo que debemos asegurarnos de que el cuadro de navegación sea el último elemento. - Ajustemos los márgenes del bloque de navegación usando un valor negativo igual al tamaño de los márgenes internos. Esto permitirá que este bloque ocupe todo el ancho de la página.
- Ajustemos el acolchado para que haya un poco de "aire" en el elemento.
- Finalmente, usaremos la propiedad
justify-content: centerpara centrar los elementos de navegación (aunque esto no es particularmente importante).
Estos son los estilos (entre corchetes están los elementos de la lista anterior con los que se relacionan):
.nav {
flex: 1 0 100%; /* [1] */
order: 2; /* [2] */
margin: 1rem -1rem -1rem -1rem; /* [3] */
padding: 1rem; /* [4] */
display: flex; /* [5] */
justify-content: center; /* [5] */
}
Y así es como se verá la aplicación paso a paso de los estilos anteriores a la lista de elementos de navegación.
Elementos de estilo paso a paso
▍Ajustar la distancia entre elementos
Ahora que los navegadores Chrome y Firefox admiten la propiedad
gap, es muy fácil ajustar el espacio entre los elementos flexibles. Eche un vistazo a la siguiente sección de encabezado de la página.
Uso de la propiedad de espacio
Para ajustar la distancia entre los elementos seleccionados en la figura, debe agregar una propiedad al elemento flexible principal
gap: 1rem. Sin usar esta propiedad, tendríamos que diseñar los elementos de la misma manera.
/* */
.brand {
margin-right: 1rem;
}
.sign-in {
margin-right: 1rem;
}
/* */
.site-header {
/* flexbox-*/
gap: 1rem;
}
Si usa una propiedad
gap, recuerde que deberá preparar una reserva en caso de que no sea compatible con el navegador en el que se visualiza la página. Escribí un artículo detallado sobre esto .
Con esto concluye la conversación, pero antes de separarnos, permítanme mostrarles uno de mis proyectos.
Proyecto Headers-css
A continuación se muestra un ejemplo de encabezados de página que se crean dentro del proyecto headers-css.
Encabezados de páginas de headers-css
Decidí hacer un proyecto en el que se recopilen plantillas para partes de encabezado de sitios web, diseñadas como páginas separadas. Ahora, si necesito un elemento similar, puedo encontrarlo rápidamente e integrarlo en un nuevo proyecto. Es decir, creé 17 variaciones del encabezado de la página. Planeo expandir este proyecto en un futuro cercano. Mientras trabajaba en estos elementos, presté especial atención a lo siguiente:
- Flexibilidad.
- Diseño totalmente receptivo.
- Usando Sass, que facilita la edición de mis plantillas (aunque en esta área todavía necesito refactorizar un poco el código).
- Accesibilidad (si encuentra algo incorrecto, agregue una entrada al rastreador de tareas del proyecto).
Aquí hay una página para ver el proyecto headers-css en acción. Y aquí está el repositorio de GitHub del proyecto.
¿Cómo crea las partes del encabezado de sus páginas web?
