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

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.

Así que 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 que los diseños sean 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 más comunes de Flexbox. Exploraremos qué hacen, cómo puede usarlos y cómo se verán sus resultados.

Propiedad # 1: Pantalla: Flex

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

Tienes cuatro divisiones de colores de varios tamaños, dentro de un contenedor gris. A partir de ahora, cada div se ha predeterminado para mostrar: bloque. Cada cuadrado ocupa así el ancho completo de su línea.

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

#envase {
  pantalla: flex;
}

No ha cambiado mucho: sus divs se muestran en línea ahora, 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 posicionarlos dentro de ese contexto, con mucha menos dificultad que el CSS tradicional.

Propiedad # 2: Dirección Flex

Un contenedor Flexbox tiene dos ejes: un eje principal y un eje transversal, que por defecto se ven así:

De forma predeterminada, los elementos se organizan a lo largo del eje principal, de izquierda a derecha. Esta es la razón por la cual sus cuadrados se convirtieron en una línea horizontal una vez que aplicó la pantalla: flex.

Sin embargo, la dirección de flexión le permite girar el eje principal.

#envase {
  pantalla: flex;
  dirección flexible: columna;
}

Aquí hay una distinción importante que hacer: dirección flexible: la columna no alinea los cuadrados en el eje transversal en lugar del eje principal. Hace que el eje principal pase de horizontal a vertical.

También hay un par de otras opciones para la dirección de flexión: reverso de fila y reverso de columna.

Propiedad # 3: Justificar contenido

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

Aquí, te sumergirás un poco más en la distinción eje principal / eje transversal. Primero, volvamos a la dirección flexible: fila.

#envase {
  pantalla: flex;
  dirección flexible: fila;
  justify-content: inicio flexible;
}

Tienes cinco comandos a tu 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. El espacio intermedio proporciona el mismo espacio entre cada cuadrado, pero no entre él y el contenedor.

Space-around pone un colchón de espacio igual a cada lado del cuadrado, lo que significa que el espacio entre los cuadrados más exteriores y el contenedor es la mitad del espacio entre dos cuadrados (cada cuadrado contribuye con 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 te mudes a ...

Propiedad # 4: Alinear elementos

Si "obtiene" contenido de justificación, los elementos de alineación serán muy fáciles.

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

Restablezcamos nuestra dirección flexible a fila, para que nuestros ejes tengan el mismo aspecto que 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 primeros tres son exactamente lo mismo que justificar el contenido, por lo que aquí no hay nada demasiado elegante.

Sin embargo, los siguientes dos son un poco diferentes.

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

(Tenga en cuenta que para los elementos de alineación: estiramiento, 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, alinea la parte inferior de los cuadrados, así:

Para demostrar mejor los ejes principal y transversal, combinemos el contenido de justificación y los elementos de alineación y veamos cómo el centrado funciona de manera diferente para los dos comandos de dirección flexible:

Con la fila, los cuadrados se configuran 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 a uno mismo

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

Básicamente, está anulando elementos de alineación para un cuadrado. Todas las propiedades son las mismas, aunque su valor predeterminado es auto, en el que sigue los elementos de alineación del contenedor.

#envase {
  alinear elementos: inicio flexible;
}
.un cuadrado {
  alinearse: centro;
}
// Solo este cuadrado estará centrado.

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

Conclusión

Aunque 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 con el contenido de su corazón.

Si desea ver más tutoriales GIF Flexbox, o si este tutorial fue útil para usted, toque el corazón verde a continuación o deje un comentario.

¡Gracias por leer!