Aprenda Flexbox básico en solo 10 minutos

¿Qué es Flexbox?

Flexbox, abreviatura de "caja flexible", es un modo de diseño introducido en CSS3 que determina cómo se organizan los elementos en una página para que se comporten de manera predecible en diferentes tamaños de pantalla y dispositivos.

Se llama Flexbox debido a su capacidad para expandir y contraer elementos dentro de la caja flexible para llenar mejor el espacio disponible. En comparación con los métodos de diseño más antiguos, como la tabla de visualización y los bloques flotantes en línea, Flexbox es una forma más poderosa de:

  • Distribuya los elementos en diferentes direcciones
  • Reorganizar el orden de visualización de los elementos
  • Cambiar la alineación de elementos
  • Encajar elementos dinámicamente en el contenedor

¿Cuándo no usar Flexbox?

Si bien Flexbox es excelente para escalar, alinear y reordenar elementos, trate de evitar usarlo para:

  • diseño de página general
  • sitios web que son totalmente compatibles con navegadores antiguos

Los navegadores más antiguos, como IE 11 o versiones anteriores, no admiten Flexbox o solo lo admiten parcialmente. Si quiere ir a lo seguro, debe recurrir a otros métodos de diseño CSS, como display: inline-blockcon floaty display: table.

Sin embargo, si solo se dirige a navegadores modernos, definitivamente vale la pena echarle un vistazo a Flexbox.

Terminología

En el modelo Flexbox, existen tres conceptos básicos:

  • elementos flexibles, los elementos que deben distribuirse
  • contenedor flexible, que contiene elementos flexibles
  • dirección de flujo, que determina la dirección de diseño de elementos flexibles

Los seres humanos aprenden mejor de la experiencia y los ejemplos, ¡así que comencemos!

Nivel 1 - Básico

1) Creando un contenedor flexible

.flex-container { display: flex;}

Para crear un contenedor flexible, solo necesita agregar la display: flexpropiedad a un elemento. De forma predeterminada, todos los elementos secundarios directos se consideran elementos flexibles y se colocan horizontalmente en una sola fila de izquierda a derecha. Si el ancho total de los artículos flexibles es mayor que el contenedor, los artículos se reducirán para que quepan en el contenedor.

2) Coloque los elementos flexibles en una sola columna

.flex-container { display: flex; flex-direction: column;}

Los elementos flexibles se pueden colocar verticalmente configurando flex-direction: column. También es posible colocarlos en orden inverso configurando flex-direction: column-reverseo flex-direction: row-reverse.

.flex-container { display: flex; flex-direction: column-reverse;}

Nivel 2 - Principiante

1) Alinee los elementos flexibles a la derecha

.flex-container { display: flex; justify-content: flex-end;}

Recuerde que hay una dirección de flexión para cada modelo de Flexbox. justify-contentse utiliza para especificar dónde deben colocarse los elementos flexibles a lo largo de la dirección de flexión. En el ejemplo anterior, justify-content: flex-endsignifica que los elementos se justifican hasta el final del contenedor flexible en la dirección horizontal. Por eso se colocan a la derecha.

2) Elementos flexibles de alineación central

.flex-container { display: flex; justify-content: center;}

3) Extienda los artículos flexibles

Puede especificar cuánto espacio debe aparecer entre los elementos de un contenedor utilizando uno de los tres posibles valores de espaciado para la justify-contentpropiedad:

  • space-evenly: el espacio entre el borde inicial del contenedor y el primer artículo es igual al espacio entre cada artículo y el artículo adyacente.
  • space-between: el espacio entre dos elementos adyacentes es el mismo, pero no necesariamente igual al espacio entre el primer / último elemento y su borde más cercano; el espacio entre el borde inicial y el primer elemento es igual al espacio entre el borde final y el último elemento.
  • space-around: el espacio a cada lado de un artículo es el mismo para cada artículo del contenedor. Tenga en cuenta que esto significa que el espacio entre dos elementos adyacentes será dos veces mayor que el espacio entre el primer / último elemento y su borde más cercano.

4) Alinee los elementos flexibles en una segunda dirección

.flex-container { display: flex; justify-content: center; align-items: center;}

Por lo general, nos gustaría colocar los elementos a lo largo de la dirección de flexión y al mismo tiempo alinearlos en la dirección perpendicular a ella. Al configurar justify-content: centery align-items: center, los elementos flexibles se pueden colocar en el centro del contenedor flexible tanto horizontal como verticalmente.

5) Alinear un elemento flexible en particular

.flex-container { display: flex; align-items: center;}
.flex-bottom { align-self: flex-end;}

Es posible alinear un elemento flexible en particular de manera diferente a los demás en el contenedor mediante el uso de la align-selfpropiedad CSS en ese elemento.

Nivel 3 - Intermedio

1) Permita que los elementos flexibles se envuelvan en otras filas / columnas

.flex-container { display: flex; flex-wrap: wrap;}

De forma predeterminada, los elementos flexibles no pueden ajustarse y se redimensionan para que quepan en una sola fila o columna si el contenedor flexible no es lo suficientemente grande para todos ellos. Al agregar flex-wrap: wrap, los elementos flexibles que desbordarían el contenedor se envolverán en otra fila.

2) envoltura inversa

.flex-container { display: flex; flex-wrap: wrap-reverse;}

Los artículos flexibles todavía se colocan en varias filas, flex-wrap: wrap-reversepero comienzan desde el final del contenedor flexible.

3) Justificar la posición de las líneas de elementos.

.flex-container { display: flex; flex-wrap: wrap; align-content: flex-start;}

De forma predeterminada, las filas de elementos flexibles que se envuelven se estiran para ocupar todo el espacio restante con el mismo espacio entre las filas adyacentes. Puede establecer align-contenten el contenedor flexible para determinar la posición de las filas cuando se produce la envoltura. Los valores posibles son flex-start, flex-end, center, space-between, space-aroundy stretch(por defecto).

Nivel 4 - Avanzado

1) Expandir elementos

.flex-container { display: flex;}
.flex-item.nth-of-type(1){ flex-grow: 1;}
.flex-item.nth-of-type(2) { flex-grow: 2;}

flex-growsolo tiene efecto cuando queda espacio restante en el contenedor flexible. La flex-growpropiedad de un elemento flexible especifica cuánto se expandirá un elemento en relación con los otros elementos para llenar el cuadro flexible. El valor predeterminado es 1. Cuando se establece en 0, el elemento no crecerá para llenar el espacio restante en absoluto. En este ejemplo, la proporción de dos elementos es 1: 2, lo que significa que el primer elemento ocupará ⅓, mientras que el segundo elemento ocupará ⅔ del espacio restante.

2) Elementos retráctiles

.flex-container { display: flex;}
.flex-item:nth-of-type(1) { flex-shrink: 1;}
.flex-item:nth-of-type(2) { flex-shrink: 2;}

flex-shrinksolo tiene efecto cuando los elementos flexibles se desbordan del contenedor flexible debido a la falta de espacio. Especifica cuánto se encogerá un elemento en relación con los otros elementos para que los elementos no se desborden de la caja flexible. El valor predeterminado es 1. Cuando se establece en 0, el elemento flexible no se encogerá en absoluto. En este ejemplo, la proporción es 1: 2, lo que significa que el primer elemento se reducirá en ⅓, mientras que el segundo elemento se reducirá en ⅔ del espacio desbordado.

3) Establecer el tamaño de los elementos

.flex-container { display: flex;}
.flex-item.nth-of-type(1) { flex-basis: 200px;}
.flex-item.nth-of-type(2) { flex-basis: 10%;}

En lugar de utilizar el tamaño inicial de un elemento, puede personalizar su tamaño con flex-basis. De forma predeterminada, su valor es flex-basis: auto, lo que significa el tamaño calculado a partir de reglas CSS que no son de Flexbox. También puede establecerlo en algún valor absoluto o un valor que represente un porcentaje del contenedor flexible; por ejemplo flex-basis: 200pxy flex-basis: 10%.

4) Junte el crecimiento flexible, el encogimiento flexible y la base flexible

.flex-container { display: flex;}
.flex-item:nth-of-type(1) { flex: 1 0 100px;}
.flex-item:nth-of-type(2) { flex: 2 0 10%;}

flexes una abreviatura de flex-grow, flex-shrinky flex-basis. En este ejemplo, el primer elemento flexible está configurado para serflex-grow=1, flex-shrink=0,flex-basis=100px Y el segundo elemento flexible está dispuesto a serflex-grow=2, flex-shrink=0,flex-basis=10% . En este caso, dado que queda espacio restante en el contenedor flexible, solo flex-growtiene efectos y flew-shrinkse ignora.

Conclusión

Flexbox es fácil de aprender y manipular. El conocimiento de su uso es especialmente útil ya que el ciclo de desarrollo web es corto y las iteraciones son rápidas. Si desea experimentar más con Flexbox antes de usarlo en sus proyectos, puede visitar Flexyboxes y Flexbox Froggy para practicar. También puede leer más sobre el truco CSS: Una guía para Flexbox y W3C: CSS Flexible Box.

Este artículo se publicó originalmente en el blog de Altitude Labs y fue escrito por nuestro ingeniero de software, Felix Yau. Altitude Labs es una agencia de software que se especializa en aplicaciones React personalizadas para dispositivos móviles.