Spanish (Español) translation by Carlos (you can also view the original English article)
En este tutorial, te enseñaré cómo usar flexbox para crear un pie de página responsivo, con varios niveles y varias columnas que se adhiere al final de la página, sin importar lo que pase.
Lo qué vamos a crear
Aquí está la demostración de lo que crearemos. ¡Revisa la versión a pantalla completa para apreciar bien su capacidad responsiva!
Siéntete libre de añadir algo de contenido a <div class = "container">/<div> para que veas cómo funciona la característica pegajosa de este pie de página.
Flexbox es ideal para los pies de página
Flexbox nos permite crear diseños flexibles que se adaptan naturalmente a diferentes tamaños de ventanas gráficas. Los pies de página de varios niveles y varias columnas son un buen ejemplo de cómo aprovechar las capacidades únicas de flexbox, específicamente:
- la propiedad flex-grow nos permite adherir el pie de página a la parte inferior de la página sin importar lo que pase,
- la propiedad
flex-wrappermite que las columnas se envuelvan automáticamente en base al tamaño de la ventana gráfica del dispositivo del usuario - la propiedad
justify-contenthace posible mostrar las columnas en diferentes arreglos (space-around,space-between,center, etc.).
Una vez que hayas explorado lo que flexbox puede hacer por la estructura de tu pie de página, podrás ser creativo y ver qué es posible. Los pies de página son el lugar ideal para ayudar a los usuarios a continuar su viaje; si llegaron al final de la página, pero aún no han encontrado lo que buscaban, considera añadir:
- Una navegación detallada
- Llamadas a la acción
- Suscripciones a tu boletín informativo (newsletter)
- Enlaces a redes sociales
- Pruebas tranquilizadoras, como premios, reconocimientos, insignias de privacidad (genuinas), etc.
- Enlaces para atención o ayuda en línea
- Tu marca
- Detalles de contacto
- Quizá un recordatorio de la personalidad de tu sitio web para hacer sonreír o animar al usuario a quedarse
Estructura del pie de página
Aunque también es posible crear un pie de página con CSS grid, flexbox nos permite crear varios niveles en él, uno encima del otro, donde cada nivel se ajusta de manera independiente. El pie de página que crearemos en este tutorial tiene tres niveles, cada uno de los cuales es un contenedor flexible separado:
- main footer: cuatro columnas, con un formulario de suscripción al boletín informativo en la última columna,
- social footer: seis iconos de redes sociales centrados en la página (este nivel no se envuelve),
- legal footer: tres columnas en las que las dos primeras columnas se posicionan a la izquierda, mientras que la última columna a la derecha de la pantalla.
Asimismo, el pie de página también se adherirá a la parte inferior de la página, incluso cuando no haya suficiente contenido encima. Lograremos este efecto pegajoso haciendo que toda la etiqueta <body> sea un contenedor flexible basado en una columna.
1. Estructura el HTML
Iniciemos con el HTML. He colocado todo el contenido en una etiqueta <footer> semántica y los tres niveles del footer en tres elementos <section>. Para los iconos de redes sociales, he utilizado Font Awesome.
1 |
<body>
|
2 |
<div class="container"></div> |
3 |
<footer>
|
4 |
<!-- Footer main -->
|
5 |
<section class="ft-main"> |
6 |
<div class="ft-main-item"> |
7 |
<h2 class="ft-title">About</h2> |
8 |
<ul>
|
9 |
<li><a href="#">Services</a></li> |
10 |
<li><a href="#">Portfolio</a></li> |
11 |
<li><a href="#">Pricing</a></li> |
12 |
<li><a href="#">Customers</a></li> |
13 |
<li><a href="#">Careers</a></li> |
14 |
</ul>
|
15 |
</div>
|
16 |
<div class="ft-main-item"> |
17 |
<h2 class="ft-title">Resources</h2> |
18 |
<ul>
|
19 |
<li><a href="#">Docs</a></li> |
20 |
<li><a href="#">Blog</a></li> |
21 |
<li><a href="#">eBooks</a></li> |
22 |
<li><a href="#">Webinars</a></li> |
23 |
</ul>
|
24 |
</div>
|
25 |
<div class="ft-main-item"> |
26 |
<h2 class="ft-title">Contact</h2> |
27 |
<ul>
|
28 |
<li><a href="#">Help</a></li> |
29 |
<li><a href="#">Sales</a></li> |
30 |
<li><a href="#">Advertise</a></li> |
31 |
</ul>
|
32 |
</div>
|
33 |
<div class="ft-main-item"> |
34 |
<h2 class="ft-title">Stay Updated</h2> |
35 |
<p>Subscribe to our newsletter to get our latest news.</p> |
36 |
<form>
|
37 |
<input type="email" name="email" placeholder="Enter email address"> |
38 |
<input type="submit" value="Subscribe"> |
39 |
</form>
|
40 |
</div>
|
41 |
</section>
|
42 |
|
43 |
<!-- Footer social -->
|
44 |
<section class="ft-social"> |
45 |
<ul class="ft-social-list"> |
46 |
<li><a href="#"><i class="fab fa-facebook"></i></a></li> |
47 |
<li><a href="#"><i class="fab fa-twitter"></i></a></li> |
48 |
<li><a href="#"><i class="fab fa-instagram"></i></a></li> |
49 |
<li><a href="#"><i class="fab fa-github"></i></a></li> |
50 |
<li><a href="#"><i class="fab fa-linkedin"></i></a></li> |
51 |
<li><a href="#"><i class="fab fa-youtube"></i></a></li> |
52 |
</ul>
|
53 |
</section>
|
54 |
|
55 |
<!-- Footer legal -->
|
56 |
<section class="ft-legal"> |
57 |
<ul class="ft-legal-list"> |
58 |
<li><a href="#">Terms & Conditions</a></li> |
59 |
<li><a href="#">Privacy Policy</a></li> |
60 |
<li>© 2019 Copyright Nowrap Inc.</li> |
61 |
</ul>
|
62 |
</section>
|
63 |
</footer>
|
64 |
</body>
|
2. Define los estilos básicos con CSS
Antes de empezar con el diseño, configuremos algunos estilos básicos con CSS, como colores, fuentes y espaciado. He usado las siguientes reglas de estilo, sin embargo, puedes utilizar cualquier otro estilo que se adapte a tu diseño.
1 |
* { |
2 |
box-sizing: border-box; |
3 |
font-family: ’Lato’, sans-serif; |
4 |
margin: 0; |
5 |
padding: 0; |
6 |
}
|
7 |
ul { |
8 |
list-style: none; |
9 |
padding-left: 0; |
10 |
}
|
11 |
footer { |
12 |
background-color: #555; |
13 |
color: #bbb; |
14 |
line-height: 1.5; |
15 |
}
|
16 |
footer a { |
17 |
text-decoration: none; |
18 |
color: #eee; |
19 |
}
|
20 |
a:hover { |
21 |
text-decoration: underline; |
22 |
}
|
23 |
.ft-title { |
24 |
color: #fff; |
25 |
font-family: ’Merriweather’, serif; |
26 |
font-size: 1.375rem; |
27 |
padding-bottom: 0.625rem; |
28 |
}
|
3. Adhiere el pie de página a la parte inferior de la página.
Con flexbox, podemos crear un pie de página pegajoso (sticky footer) con solo un par de líneas de CSS. El siguiente código hace que todo el cuerpo de la página sea un contenedor flexible que tiene al menos el 100% de la altura de la ventana gráfica (100vh).
1 |
body { |
2 |
display: flex; |
3 |
min-height: 100vh; |
4 |
flex-direction: column; |
5 |
}
|
6 |
.container { |
7 |
flex: 1; /* same as flex-grow: 1; */ |
8 |
}
|
El verdadero truco está en añadir la regla flex: 1; al elemento .container (que está encima de <footer> en el HTML). La propiedad flex es una abreviatura de las propiedades flex-grow, flex-shrink y flex-base. Cuando solo tiene un valor, se refiere a flex-grow, con flex-shrink y flex-basis configurados en sus valores por defecto.
La propiedad flex-grow define lo que ocurre dentro del contenedor flexible cuando hay demasiado espacio positivo (es decir, cuando los artículos flexibles no se extienden por todo el contenedor). Su valor predeterminado es 0, lo que significa que todo el espacio restante se asignará por igual entre los elementos. Así que, cuando configuramos flex-grow en 1, .container obtendrá todo el espacio restante en la pantalla. A la vez, <footer> no tendrá espacio adicional, por lo que será empujado automáticamente al final de la página.
4. Alinea la sección ‘main footer’ (pie de página principal)
Ahora que el pie de página está bien pegado al final de la página, es momento de alinear las columnas de ‘main footer’.
El elemento .ft-main será el contenedor flexible y la propiedad flex-wrap permitirá que el pie de página se envuelva en varias filas según el tamaño de la pantalla. Para evitar que las columnas sean demasiado reducidas, también configuré un ancho mínimo de 200px para cada elemento flexible
1 |
.ft-main { |
2 |
padding: 1.25rem 1.875rem; |
3 |
display: flex; |
4 |
flex-wrap: wrap; |
5 |
}
|
6 |
.ft-main-item { |
7 |
padding: 1.25rem; |
8 |
min-width: 12.5rem /*200px*/; |
9 |
}
|
El pie de página principal (main footer) no utiliza propiedades de alineación específicas en pantallas más pequeñas. Como resultado, flexbox alinea automáticamente cada columna al principio del eje principal (que, en el caso predeterminado, es la izquierda de la pantalla)
No obstante, en pantallas más grandes, se ve mucho mejor cuando el espacio se reparte con mayor precisión. Por tanto, coloqué justify-content en space-around para pantallas medianas y en space-evenly para pantallas grandes. Cuando estés creando otro diseño de pie de página, te recomiendo que experimentes con distintos valores de justify-content para que puedas ver cuál se adapta mejor a tu diseño.
1 |
@media only screen and (min-width: 29.8125rem /*477px*/) { |
2 |
.ft-main { |
3 |
justify-content: space-around; |
4 |
}
|
5 |
}
|
6 |
@media only screen and (min-width: 77.5rem /*1240px*/ ) { |
7 |
.ft-main { |
8 |
justify-content: space-evenly; |
9 |
}
|
10 |
}
|
5. Estiliza el formulario del boletín informativo
La última columna de ‘main footer’ contiene un formulario de
suscripción al boletín informativo que requiere atención adicional. También añadí el diseño de flexbox al elemento <form>, de manera que el campo de entrada y el botón de envío estén bien alineados en todas las ventanas gráficas. Gracias a la regla flex-wrap: wrap;, el botón de envío se deslizará bien debajo del campo de entrada cuando la ventana gráfica se vuelva muy pequeña.
Asimismo, cuando el formulario se envuelva, también habrá algunos espacios en blanco entre los dos elementos debido a la propiedad margin-top configurada en el botón de envío. También añadí el mismo valor de margin-top al campo de entrada para que flexbox lo muestre perfectamente al lado del botón de envío en ventanas gráficas más grandes.
1 |
form { |
2 |
display: flex; |
3 |
flex-wrap: wrap; |
4 |
}
|
5 |
input[type="email"] { |
6 |
border: 0; |
7 |
padding: 0.625rem; |
8 |
margin-top: 0.3125rem; |
9 |
}
|
10 |
input[type="submit"] { |
11 |
background-color: #00d188; |
12 |
color: #fff; |
13 |
cursor: pointer; |
14 |
border: 0; |
15 |
padding: 0.625rem 0.9375rem; |
16 |
margin-top: 0.3125rem; |
17 |
}
|
6. Alinea la sección ‘social footer’
Crear el diseño de esta sección es relativamente simple, ya que solo es una lista desordenada con algunos pequeños iconos. Ya que los iconos son muy pequeños, no es necesario envolver este nivel de pie de página. La regla justify-content: center; lo alinea al centro del eje principal en cada tamaño de pantalla.
1 |
.ft-social { |
2 |
padding: 0 1.875rem 1.25rem; |
3 |
}
|
4 |
.ft-social-list { |
5 |
display: flex; |
6 |
justify-content: center; |
7 |
border-top: 1px #777 solid; |
8 |
padding-top: 1.25rem; |
9 |
}
|
10 |
.ft-social-list li { |
11 |
margin: 0.5rem; |
12 |
font-size: 1.25rem; |
13 |
}
|
7. Alinea la sección ‘legal footer’
Legal footer contiene tres elementos: dos enlaces a la izquierda y un aviso de derechos de autor a la derecha. Para lograr esta distribución, podemos usar el mismo truco de flexbox que para el pie de página pegajoso. Allí, utilizamos la regla flex: 1; en el elemento .container, por lo que flexbox le asignó todo el espacio positivo y empujó el footer hasta la parte inferior de la página. Aquí podemos hacer lo mismo.
A pesar de que .ft-legal-list es un contenedor flexible basado en filas, y .container está basado en columnas, podemos seguir la misma lógica. Si ajustamos flex-grow a 1 para la segunda columna, automáticamente empujará el aviso de copyright a la derecha de la pantalla.
En las pantallas de dispositivos móviles, también todo se ve bien. En este caso, flexbox muestra los tres elementos uno debajo del otro, alineados a la izquierda de la pantalla.
1 |
.ft-legal { |
2 |
padding: 0.9375rem 1.875rem; |
3 |
background-color: #333; |
4 |
}
|
5 |
.ft-legal-list { |
6 |
width: 100%; |
7 |
display: flex; |
8 |
flex-wrap: wrap; |
9 |
}
|
10 |
.ft-legal-list li { |
11 |
margin: 0.125rem 0.625rem; |
12 |
white-space: nowrap; |
13 |
}
|
14 |
/* one before the last child */
|
15 |
.ft-legal-list li:nth-last-child(2) { |
16 |
flex: 1; /* same as flex-grow: 1; */ |
17 |
}
|
Revisa la demostración
Y eso es todo; ¡Nuestro pie de página pegajoso con múltiples niveles, múltiples columnas y responsivo está listo! Revisa la demostración nuevamente para recordar cómo se ve en diferentes tamaños de pantallas:
Conclusión
Flexbox nos permite crear diseños complejos y flexibles con mucho menos código que antes. Utilizando las técnicas y los trucos presentados en este tutorial, puedes crear cualquier estructura de pie de página que quieras, con cualquier cantidad de niveles y columnas.
La mayor ventaja de los pies de página con flexbox es que puedes utilizar diferentes reglas de envoltura, tamaño y alineación para cada nivel. Como resultado, puedes mantener el pie de página completamente consciente del contenido sin tener que utilizar JavaScript o (muchas) media queries.
Aprende los conceptos básicos de Flexbox
La sintaxis de Flexbox es variada y a con frecuencia confusa. Incluso si estás familiarizado con flexbox, siempre vale la pena recordar los conceptos básicos.
By
