Flexbox es un estándar CSS optimizado para diseñar interfaces de usuario. Usando las diversas propiedades de flexbox, podemos construir nuestra página a partir de pequeños bloques de construcción, que luego se colocan y redimensionan sin esfuerzo de la forma que queramos. Los sitios web y las aplicaciones creados de esta manera responden y se adaptan bien a todos los tamaños de pantalla.
En este artículo, veremos cinco enfoques de flexbox para resolver problemas comunes de diseño de CSS. También hemos incluido ejemplos prácticos para mostrar escenarios de la vida real en los que se aplican estas técnicas.
1. Creación de columnas de igual altura
Esto puede no parecer una tarea difícil al principio, pero hacer columnas que tengan la misma altura puede ser realmente molesto. Simplemente configurando min-height no funcionará, porque una vez que la cantidad de contenido en las columnas comience a diferir, algunas de ellas crecerán y otras permanecerán más cortas.
Solucionar este problema con flexbox no podría ser más fácil, ya que las columnas creadas de esta manera tienen la misma altura de forma predeterminada. Todo lo que tenemos que hacer es inicializar el modelo flexible, luego asegurarnos de que las propiedades de dirección flexible y elementos de alineación tengan sus valores predeterminados.
.container {
/* Initialize the flex model */
display: flex;
/* These are the default values but you can set them anyway */
flex-direction: row; /* Items inside the container will be positioned horizontally */
align-items: stretch; /* Items inside the container will take up it's entire height */
}
<div class="container">
<!-- Equal height columns -->
<div>...</div>
<div>...</div>
<div>...</div>
</div> Para ver una demostración de esta técnica, puede consultar nuestro artículo La forma más fácil de crear barras laterales de igual altura, en el que creamos una página receptiva con una barra lateral y una sección de contenido principal.
2. Reordenación de elementos
Hace un tiempo, si tuviéramos que cambiar dinámicamente el orden de algunos elementos, probablemente probaríamos algún truco de CSS, lo dejaríamos frustrados y lo haríamos con JavaScript. Sin embargo, con flexbox, esta tarea se reduce a aplicar una sola propiedad CSS.
Se llama order y al igual que su nombre, todo lo relacionado con él es lo más sencillo posible. Nos permite intercambiar cualquier cantidad de elementos flexibles y cambiar la secuencia en la que aparecen en la pantalla. Su único parámetro es un número entero que determina la posición de ese elemento:los números más bajos significan una mayor prioridad.
.container{
display: flex;
}
/* Reverse the order of elements */
.blue{
order: 3;
}
.red{
order: 2;
}
.green{
order: 1;
}
<div class="container">
<!-- These items will appear in reverse order -->
<div class="blue">...</div>
<div class="red">...</div>
<div class="green">...</div>
</div> La propiedad order tiene muchos usos prácticos. Si desea ver algunos de ellos, puede consultar este artículo, donde lo usamos para crear una sección de comentarios receptivos.
3. Centrado horizontal y vertical
El centrado vertical en CSS es uno de esos problemas que nos hace preguntarnos:¿Cómo es que algo tan trivial sigue siendo tan complicado de hacer? ? Y realmente lo es. Si busca en Google CSS de centrado vertical, aparecerá una cantidad infinita de técnicas diferentes, y la mayoría de ellas involucrarán tablas o transformaciones, cosas que no están diseñadas para hacer diseños.
Flexbox ofrece una solución más fácil al problema. Cada diseño flexible tiene dos direcciones (eje X y eje Y) y dos propiedades separadas para su alineación. Al centrar ambos, podemos colocar cualquier elemento justo en el medio de su contenedor principal.
.container{
display: flex;
/* Center according to the main axis */
justify-content: center;
/* Center according to the secondary axis */
align-items: center;
}
<div class="container">
<!-- Any element placed here will be centered
both horizonally and vertically -->
<div>...</div>
</div> Para ver esta técnica en acción y leer más sobre ella, puede consultar nuestro artículo de consejos rápidos sobre el mismo tema.
4. Creación de cuadrículas totalmente receptivas
La mayoría de los desarrolladores confían en marcos CSS cuando crean cuadrículas receptivas. Bootstrap es el más popular, pero hay cientos de bibliotecas que pueden ayudarte con esta tarea. Por lo general, funcionan bien y tienen muchas opciones, pero tienden a ser bastante pesados. Si eres una persona de bricolaje o no quieres implementar un marco completo solo para la cuadrícula, ¡flexbox te tiene cubierto!
Una fila en la cuadrícula de flexbox es simplemente un contenedor con display:flex . Las columnas horizontales en su interior pueden ser cualquier cantidad de elementos, cuyo tamaño se establece mediante flex. El modelo flexible se adapta al tamaño de la ventana gráfica, por lo que esta configuración debería verse bien en todos los dispositivos. Sin embargo, si decidimos que no hay suficiente espacio horizontalmente en la pantalla, podemos convertir fácilmente el diseño en uno vertical con una consulta de medios.
.container{
display: flex;
}
/* Classes for each column size. */
.col-1{
flex: 1;
}
.col-2{
flex: 2;
}
@media (max-width: 800px){
.container{
/* Turn the horizontal layout into a vertical one. */
flex-direction: column;
}
} <div class="container">
<!-- This column will be 25% wide -->
<div class="col-1">...</div>
<!-- This column will be 50% wide -->
<div class="col-2">...</div>
<!-- This column will be 25% wide -->
<div class="col-1">...</div>
</div> Puede consultar una variación de esta técnica en nuestro Consejo rápido La manera más fácil de crear encabezados adaptables.
5. Crear el pie de página adhesivo perfecto
Flexbox también tiene una solución fácil para ese problema. Al crear páginas que incluyen un pie de página fijo, al hacer todo en elementos flexibles, podemos estar seguros de que nuestro pie de página siempre permanecerá en la parte inferior de la página.
Aplicando display: flex a la etiqueta del cuerpo nos permite construir nuestro diseño de página completo usando propiedades de modo flexible. Una vez hecho esto, el contenido principal del sitio web puede ser un elemento flexible y el pie de página otro, lo que hace que sea realmente fácil manipular su posicionamiento y colocarlos exactamente donde queremos.
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
.main{
/* The main section will take up all the available free space
on the page that is not taken up by the footer. */
flex: 1 0 auto;
}
footer{
/* The footer will take up as much vertical space as it needs and not a pixel more. */
flex: 0 0 auto;
} <body>
<!-- All the page content goes here -->
<div class="main">...</div>
<!-- Our sticky foooter -->
<footer>...</footer>
</body> Puede encontrar más información sobre esta técnica en nuestro artículo La mejor manera de hacer pies de página adhesivos.
Conclusión
Todos los navegadores principales (excepto IE 9) ahora admiten el modo de diseño flexible, por lo que, a menos que tenga una base de usuarios que prefiera los navegadores retro de Microsoft, es seguro decir que flexbox está listo para la producción. Si aún no lo ha usado, ¡le recomendamos encarecidamente que lo pruebe!
Esperamos que nuestros consejos de CSS te hayan resultado útiles y que te ayuden a crear diseños adaptables mejores y más robustos. ¡Disfrútalo!