Cómo funciona Flexbox: explicado con gifs animados grandes, coloridos

Flexbox promete salvarnos de los males del CSS simple (como la alineación vertical).

Bueno, Flexbox cumple con ese objetivo. Pero dominar su nuevo modelo mental puede ser un desafío.

Entonces, echemos un vistazo animado a cómo funciona Flexbox, para que podamos usarlo para crear mejores diseños.

El principio subyacente de Flexbox es hacer diseños flexibles e intuitivos.

Para lograr esto, permite que los contenedores decidan por sí mismos cómo distribuir uniformemente a sus hijos, incluido su tamaño y el espacio entre ellos.

Todo esto suena bien en principio. Pero veamos cómo se ve en la práctica.

En este artículo, profundizaremos en las 5 propiedades de Flexbox más comunes. Exploraremos qué hacen, cómo puede usarlos y cómo se verán realmente sus resultados.

Propiedad # 1: Pantalla: Flex

Aquí está nuestra página web de ejemplo:

Tiene cuatro divs de colores de varios tamaños, dentro de un div contenedor gris. A partir de ahora, cada div ha predeterminado display: block. Cada cuadrado ocupa así todo el ancho de su línea.

Para comenzar con Flexbox, debe convertir su contenedor en un contenedor flexible . Esto es tan fácil como:

#container { display: flex;}

No ha cambiado mucho: sus divs se muestran ahora en línea, pero eso es todo. Pero detrás de escena, has hecho algo poderoso. Le diste a tus cuadrados algo llamado contexto flexible .

Ahora puede comenzar a colocarlos dentro de ese contexto, con mucha menos dificultad que el CSS tradicional.

Propiedad # 2: Dirección flexible

Un contenedor Flexbox tiene dos ejes: un eje principal y un eje transversal , que por defecto tienen este aspecto:

De forma predeterminada, los elementos se organizan a lo largo del eje principal, de izquierda a derecha . Esta es la razón por la que sus cuadrados tomaron por defecto una línea horizontal una vez que realizó la solicitud display: flex.

Flex-direction, sin embargo, le permite rotar el eje principal.

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

Hay una distinción importante que hacer aquí: flex-direction: columnno alinea los cuadrados en el eje transversal en lugar del eje principal. Hace que el propio eje principal pase de horizontal a vertical.

También hay un par de otras opciones para flex-direction: row-reverse y column-reverse.

Propiedad n. ° 3: justificar el contenido

Justify-content controla cómo alinea los elementos en el eje principal.

Aquí, profundizará un poco más en la distinción del eje principal / transversal. Primero, volvamos a flex-direction: row.

#container { display: flex; flex-direction: row; justify-content: flex-start;}

Tiene cinco comandos a su disposición para usar justify-content :

  1. Inicio flexible
  2. Extremo flexible
  3. Centrar
  4. Espacio entre
  5. Espacio alrededor

Space-around y space-between son los menos intuitivos. Space-between da el mismo espacio entre cada cuadrado, pero no entre éste y el contenedor.

Space-around coloca un cojín de espacio igual a cada lado del cuadrado, lo que significa que el espacio entre los cuadrados más externos y el contenedor es la mitad del espacio entre dos cuadrados (cada cuadrado aporta una cantidad igual de margen no superpuesto, duplicando así el espacio).

Una nota final: recuerde que justify-content funciona a lo largo del eje principal , y flex-direction cambia el eje principal . Esto será importante a medida que se mude a ...

Propiedad # 4: Alinear elementos

Si 'obtiene' justify-content, alinear elementos será muy sencillo.

Como justify-content funciona a lo largo del eje principal, align-items se aplica al eje transversal.

Restablezcamos nuestra dirección de flexión a la fila, para que nuestros ejes se vean igual que en la imagen de arriba.

Luego, profundicemos en los comandos de alinear elementos.

  1. inicio flexible
  2. extremo flexible
  3. centrar
  4. tramo
  5. base

Los tres primeros son exactamente iguales a justify-content , por lo que aquí no hay nada demasiado sofisticado.

Sin embargo, los dos siguientes son un poco diferentes.

Tiene estiramiento, en el que los elementos ocupan la totalidad del eje transversal, y línea de base, en el que se alinean las etiquetas de la parte inferior de los párrafos.

(Tenga en cuenta que para align-items: stretch, tuve que establecer la altura de los cuadrados en automático. De lo contrario, la propiedad de altura anularía el estiramiento).

Para la línea de base, tenga en cuenta que si quita las etiquetas de párrafo, se alinea la parte inferior de los cuadrados, así:

Para demostrar mejor los ejes principal y transversal, combinemos justify-content y align-items y veamos cómo el centrado funciona de manera diferente para los dos comandos de dirección flexible:

Con fila, los cuadrados se colocan a lo largo de un eje principal horizontal. Con columna, caen a lo largo de un eje principal vertical.

Incluso si los cuadrados están centrados tanto vertical como horizontalmente en ambos casos, ¡los dos no son intercambiables!

Propiedad # 5: Alinear uno mismo

Align-self le permite manipular manualmente la alineación de un elemento en particular.

Básicamente, anula los elementos de alineación de un cuadrado. Todas las propiedades son iguales, aunque por defecto es auto , en el que sigue los elementos de alineación del contenedor.

#container { align-items: flex-start;}
.square#one { align-self: center;}// Only this square will be centered.

Veamos cómo se ve esto. Aplicará align-self a dos cuadrados, y para el resto aplicará align-items: centery flex-direction: row.

Conclusión

A pesar de que acabamos de arañar la superficie de Flexbox, estos comandos deberían ser suficientes para que pueda manejar la mayoría de las alineaciones básicas y alinearse verticalmente a su gusto.

Si desea ver más tutoriales de GIF Flexbox, o si este tutorial le resultó útil, presione el corazón verde a continuación o deje un comentario.

¡Gracias por leer!