Flexbox es un módulo de maquetación CSS que te permite crear diseños flexibles y adaptables para tus elementos HTML. Resulta especialmente útil cuando la maquetación tiene que adaptarse a distintos tamaños de pantalla o a distintos dispositivos.
Con Flexbox alineas los elementos en horizontal o en vertical, controlas el espacio entre ellos y defines el orden en que aparecen. También ofrece formas flexibles de dimensionar los elementos, que es justo lo que necesita un diseño responsive.
Para usar Flexbox en tu proyecto, lo primero es declarar un contenedor flex con la propiedad CSS display: flex o display: inline-flex en un elemento HTML. A partir de ahí, las propiedades de Flexbox controlan la disposición de sus hijos.
.container-flex {
display: flex;
}Cómo alinear los elementos con Flexbox
Una de las cosas más útiles de Flexbox es su manera flexible de alinear los elementos. Varias propiedades te permiten controlar cómo se colocan dentro de un contenedor flex.
Alineación horizontal de los elementos con justify-content
La propiedad justify-content controla la alineación horizontal de los elementos.
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
/*alinea los elementos con el borde izquierdo*/
.container {
justify-content: flex-start;
}
/*centra los elementos*/
.container {
justify-content: center;
}
/*alinea los elementos con el borde derecho*/
.container {
justify-content: flex-end;
}
/*reparte los elementos de forma uniforme entre el borde izquierdo y el derecho, sin espacio en los bordes*/
.container {
justify-content: space-between;
}
/*reparte los elementos de forma uniforme entre el borde izquierdo y el derecho, con el mismo espacio en ambos bordes*/
.container {
justify-content: space-around;
}
/* reparte los elementos de forma uniforme entre el borde izquierdo y el derecho, con el mismo espacio en ambos bordes y entre cada elemento */
.container {
justify-content: space-evenly;
}Alineación vertical de los elementos con align-items
La propiedad align-items controla la alineación vertical de los elementos.
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;
/* Alinear todos los elementos arriba */
.container {
align-items: flex-start;
}
/* Alinear todos los elementos en el centro */
.container {
align-items: center;
}
/* Alinear todos los elementos abajo */
.container {
align-items: flex-end;
}
/*hace que los elementos se ajusten a la altura de su contenido*/
.container {
align-items: stretch;
}Cómo gestionar el espacio entre los elementos con Flexbox
Flexbox también te deja gestionar el espacio entre los elementos de forma flexible. Varias propiedades controlan el espaciado dentro de un contenedor flex.
Añadir espacio entre los elementos con margin
La propiedad margin define el espacio entre un elemento y los demás. Sirve para ajustar el espaciado elemento por elemento.
/* Añadir 20px de espacio entre cada elemento */
.item {
margin: 0 20px;
}Añadir espacio alrededor de un elemento con padding
La propiedad padding define el espacio entre los bordes de un elemento y su contenido. Sirve para añadir espacio alrededor de un elemento concreto.
/* Añadir 20px de espacio alrededor de un elemento */
.item {
padding: 20px;
}Usar gap para añadir espacio entre los elementos
Desde la llegada de CSS Grid Layout, Flexbox puede usar gap para añadir espacio entre los elementos. Esta propiedad define un espacio uniforme entre todos los elementos de un contenedor flex.
/* Añadir 20px de espacio entre todos los elementos */
.container {
gap: 20px;
}Puedes combinarla con row-gap y column-gap para definir espaciados distintos entre filas y columnas. Ten en cuenta que solo afecta a los hijos directos del contenedor flex y que conviene comprobar la compatibilidad de los navegadores antes de usarla.
Las propiedades de Flexbox
Flexbox ofrece muchas propiedades para crear diseños flexibles y adaptables con tus elementos HTML. En esta parte repasamos las que más se usan.
flex-direction
La propiedad flex-direction define la dirección en la que se colocan los elementos dentro de un contenedor flex. Hay cuatro valores posibles: row, row-reverse, column y column-reverse. El valor por defecto es row.
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
/* Disposición de los elementos en fila (por defecto) */
.container {
flex-direction: row;
}
/* Disposición de los elementos en fila invertida */
.container {
flex-direction: row-reverse;
}
/* Disposición de los elementos en columna */
.container {
flex-direction: column;
}
/* Disposición de los elementos en columna invertida */
.container {
flex-direction: column-reverse;
}
flex-wrap
La propiedad flex-wrap define si los elementos de un contenedor flex se disponen en una sola línea o en varias. Hay tres valores posibles: nowrap (por defecto), wrap y wrap-reverse, que apila las líneas en orden inverso.
flex-wrap: nowrap;
flex-wrap: wrap;
/* Disposición de los elementos en una sola línea (por defecto) */
.container {
flex-wrap: nowrap;
}
/* Disposición de los elementos en varias líneas */
.container {
flex-wrap: wrap;
}flex-flow
La propiedad flex-flow es el atajo de las propiedades flex-direction y flex-wrap:
/* Disposición de los elementos en fila y en varias líneas */
.container {
flex-flow: row wrap;
}justify-content
La propiedad justify-content define cómo se alinean los elementos en el eje horizontal (x) de un contenedor flex. Hay varios valores posibles: flex-start, center, flex-end, space-between, space-around y space-evenly. El valor por defecto es flex-start.
/*alinea los elementos con el borde izquierdo*/
.container {
justify-content: flex-start;
}
/*centra los elementos*/
.container {
justify-content: center;
}
/*alinea los elementos con el borde derecho*/
.container {
justify-content: flex-end;
}
/*reparte los elementos de forma uniforme entre
el borde izquierdo y el derecho, sin espacio en los bordes*/
.container {
justify-content: space-between;
}
/*reparte los elementos de forma uniforme entre el borde izquierdo
y el derecho, con el mismo espacio en ambos bordes*/
.container {
justify-content: space-around;
}
/* reparte los elementos de forma uniforme entre el borde izquierdo
y el derecho, con el mismo espacio en ambos bordes y
entre cada elemento */
.container {
justify-content: space-evenly;
}align-items
La propiedad align-items define cómo se alinean los elementos en el eje vertical (y) de un contenedor flex. Hay varios valores posibles: flex-start, center, flex-end, baseline y stretch. El valor por defecto es stretch.
/* Alinear todos los elementos arriba */
.container {
align-items: flex-start;
}
/* Alinear todos los elementos en el centro */
.container {
align-items: center;
}
/* Alinear todos los elementos abajo */
.container {
align-items: flex-end;
}
/*hace que los elementos se ajusten a la altura de su contenido*/
.container {
align-items: stretch;
}align-content
La propiedad align-content es similar a align-items, pero actúa sobre las líneas de un contenedor flex de varias líneas. Acepta los mismos valores que align-items, más space-between, space-around y space-evenly para repartir las líneas.
align-content: flex-start;
align-content: center;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
/*alinea los elementos con el borde izquierdo*/
.container {
justify-content: flex-start;
}
/*centra los elementos*/
.container {
justify-content: center;
}
/*alinea los elementos con el borde derecho*/
.container {
justify-content: flex-end;
}
/*reparte los elementos de forma uniforme entre el
borde izquierdo y el derecho, sin espacio en los
bordes*/
.container {
justify-content: space-between;
}
/*reparte los elementos de forma uniforme entre el borde
izquierdo y el derecho, con el mismo espacio en
ambos bordes*/
.container {
justify-content: space-around;
}
/* reparte los elementos de forma uniforme entre el borde
izquierdo y el derecho, con el mismo espacio en ambos
bordes y entre cada elemento */
.container {
justify-content: space-evenly;
}order
La propiedad order define el orden en el que se muestran los elementos de un contenedor flex. Toma un número entero y su valor por defecto es 0.
<div class="container">
<div class="item first">1</div>
<div class="item second">2</div>
<div class="item third">3</div>
<div class="item fourth">4</div>
<div class="item fifth">5</div>
</div>.container {
display: flex;
}
/*coloca el elemento 1 en primer lugar*/
.first {
order: -1;
}
/*coloca el elemento 3 en segundo lugar*/
.third {
order: 2;
}
/*coloca el elemento 5 en último lugar*/
.fifth {
order: 3;
}
Con este código, el orden de aparición de los elementos será: 1, 3, 2, 4, 5
Todos los elementos con un valor de orden definido se ordenan por ese valor, y los que no lo tienen se quedan con el 0 por defecto. Los elementos con valores negativos se muestran antes que los que tienen valores positivos.
Puedes jugar con estos valores hasta conseguir la presentación que buscas. Ten en cuenta que el orden en el que declaras las propiedades CSS en el archivo no influye en el orden de aparición: para eso está order.
flex-grow, flex-shrink y flex-basis
Las propiedades flex-grow, flex-shrink y flex-basis definen el tamaño de los elementos de un contenedor flex.
flex-growdefine la proporción del espacio disponible que debe ocupar cada elemento.flex-shrinkdefine en qué proporción se encoge un elemento para caber en un contenedor más pequeño.flex-basisdefine el tamaño base de un elemento antes de aplicar las propiedadesflex-growyflex-shrink.
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
/* hace que el elemento ocupe
todo el espacio disponible */
.item {
flex-grow: 1;
}
/* hace que el elemento se encoja
para adaptarse a un contenedor más pequeño */
.item {
flex-shrink: 1;
}
/* define una base de 200px para un elemento */
.item {
flex-basis: 200px;
}También puedes combinar estas propiedades con la propiedad flex
/* flex: flex-grow | flex-shrink | flex-basi */
.item {
flex: 1 1 200px;
}Ejemplos
Ejemplo 1: una cuadrícula con Flexbox
<div class="container-flex">
<div class="item-flex item1">1</div>
<div class="item-flex item2">2</div>
<div class="item-flex item3">3</div>
<div class="item-flex item4">4</div>
<div class="item-flex item5">5</div>
<div class="item-flex item6">6</div>
<div class="item-flex item7">7</div>
<div class="item-flex item8">8</div>
<div class="item-flex item9">9</div>
</div>.container-flex {
display: flex;
flex-wrap: wrap;
/* permite que el elemento se reparta en
varias líneas si no hay espacio suficiente */
justify-content: space-between;
/* permite repartir los elementos de forma uniforme
entre el borde izquierdo y el derecho, sin espacio
en los bordes */
align-content: space-between;
/* permite repartir las líneas de forma uniforme entre
la parte superior y la inferior, sin espacio en los bordes */
}
.item-flex {
text-align: center;
flex: 1 0 calc(33.33% - 20px);
/* usa flex-grow y flex-basis para repartir los
elementos en una rejilla de 3 columnas, usando
el 33.33% del ancho disponible y
reduciendo en 20px el espacio entre cada elemento */
}
Con la propiedad flex defines cómo se adaptan los elementos al espacio disponible del contenedor flex. En este ejemplo usamos flex: 1 0 calc(33.33% - 20px); para repartir los elementos en una cuadrícula de 3 columnas ocupando el 33.33% del ancho disponible y descontando 20px de separación entre cada elemento. Así se obtiene una cuadrícula adaptable que se ajusta sola al tamaño de la ventana.
Combinando las propiedades justify-content, align-content y flex puedes crear diseños flexibles y adaptables para cualquier necesidad de maquetación. Estas propiedades se combinan de muchas maneras distintas para conseguir disposiciones a medida: experimenta con ellas hasta dar con la que mejor funcione en tu proyecto.
Ejemplo 2: menú responsive
<nav class="menu-container">
<a href="#" class="menu-item">Home</a>
<a href="#" class="menu-item">About</a>
<a href="#" class="menu-item">Services</a>
<a href="#" class="menu-item">Contact</a>
</nav>.menu-container {
display: flex; /* activa la disposición flex */
justify-content: space-between; /* alinea los elementos del menú a derecha e izquierda */
align-items: center; /* alinea verticalmente los elementos del menú en el centro */
}
/* Añade un botón de menú para las pantallas pequeñas */
.menu-container::before {
content: "Menu"; /* Texto que se muestra en el botón */
display: none; /* oculta el botón por defecto */
}
/* Cuando la resolución de la pantalla es inferior a 600px */
@media (max-width: 600px) {
.menu-container {
flex-wrap: wrap; /* Permite que los elementos pasen a varias líneas */
justify-content: center; /* Centra los elementos horizontalmente */
}
.menu-item {
flex-basis: 100%; /* Ocupa todo el ancho disponible */
text-align: center; /* Centra el texto */
}
.menu-container::before {
display: block; /* Muestra el botón de menú */
}
}En este ejemplo el menú se coloca en horizontal, pegado a izquierda y derecha en pantallas anchas (el comportamiento por defecto). En pantallas pequeñas (por debajo de 600px de ancho) los elementos se centran y pasan a varias líneas, y aparece un botón «Menu» para abrir y cerrar el menú con JavaScript o la herramienta que prefieras. Si quieres un ejemplo más detallado de un menú con Flexbox, escribí un artículo entero sobre el tema.
Conclusión
Con la propiedad CSS Flexbox creas sin esfuerzo diseños flexibles y adaptables para tus elementos HTML. Con propiedades como display, justify-content, align-items y flex alineas y organizas los elementos de un contenedor flex de forma eficaz.
Flexbox resulta especialmente útil para crear cuadrículas de contenido, menús y formularios adaptables, porque reparte el espacio disponible según las necesidades de tu maquetación. No es la solución a todos los problemas de maquetación, pero resuelve muy bien los más habituales. Se usa a menudo junto a otras tecnologías de maquetación como Grid Layout o frameworks como Bootstrap.
En resumen, Flexbox es una herramienta potente para crear maquetaciones flexibles y adaptables en sitios web y aplicaciones. Merece la pena entender sus propiedades y sus usos básicos para sacarle todo el partido. Y no olvides comprobar los límites de compatibilidad de los navegadores antes de usarlo en tus proyectos.
Esa compatibilidad, además, se puede automatizar en la compilación: PostCSS añade los prefijos de los fabricantes a partir de la lista de navegadores que declares. La configuración está detallada en la guía de Webpack 5, junto con la trampa de la consulta last 2 versions, que vuelve a colar Internet Explorer e infla tu CSS con prefijos muertos.
