Una guía visual de CSS Flexbox

¿Qué es CSS Flexbox?

Según los documentos web de MDN:

“CSS Flexible Box Layout es un módulo de CSS que define un modelo de caja CSS optimizado para el diseño de la interfaz de usuario y el diseño de elementos en una dimensión. En el modelo de diseño flexible, los elementos secundarios de un contenedor flexible se pueden colocar en cualquier dirección y pueden "flexionar" sus tamaños, ya sea creciendo para llenar el espacio no utilizado o encogiéndose para evitar desbordar al padre. Tanto la alineación horizontal como la vertical de los niños se pueden manipular fácilmente ".

Entonces, para resumir, es un módulo de diseño que facilita la alineación y la distribución del espacio entre los elementos de un contenedor.

Echemos un vistazo rápido a algunos ejemplos de lo que se puede hacer con solo un mínimo de 1 a 2 líneas de códigos usando CSS flexbox:

Diseño de alineación horizontal:

Diseño de alineación vertical:

Es genial dado que solo se requirieron una o dos líneas de CSS para manipular el diseño dentro de cada contenedor.

Los basicos

Las propiedades de Flexbox se pueden clasificar en 2 tipos principales:

  1. Propiedades del contenedor (flex-direction, flex-wrap, justify-content, align-items, align-content)
  2. Propiedades de elementos flexibles (orden, flexión, flexión, flexión, contracción, alineación automática)

Pantalla: flex

La primera propiedad no es específica de flexbox. Esa propiedad es displayla que establece en el valor: flex. Esto se establece en el contenedor que contiene los elementos que queremos manipular.

Agreguemos algunos elementos visuales para comprender cómo funciona:

Si inicialmente tenemos un contenedor, con 3 cajas ( div) dentro de él. Así es como se verán:

Ahora agreguemos flexal contenedor:

Solo una línea de CSS ha cambiado el diseño de una dirección vertical a una horizontal.

Terminologías importantes sobre Flexbox

Estas terminologías se utilizarán a lo largo de esta guía.

  1. Contenedor flexible: se refiere al contenedor que se le ha display: flex;colocado.
  2. Artículo flexible: estos son los niños individuales dentro del contenedor flexible
  3. Eje principal : por defecto se establece de izquierda a derecha.
  4. Eje transversal : por defecto se establece de arriba a abajo.

Tan pronto como display: flexse establece en un contenedor, estos ejes imaginarios trabajarán juntos para determinar cómo los elementos flexibles dentro del contenedor flexible deben moverse y comportarse. Estos dos ejes cambian de dirección cada vez que cambiamos ciertas propiedades de flexbox que se analizan a continuación.

Dirección de flexión

Esta propiedad determina la dirección de los ejes imaginarios. Los ejes, a su vez, determinan cómo se deben colocar los elementos en el contenedor flexible. Toma los siguientes 4 valores:

  1. rowes el valor predeterminado del eje principal que apunta de izquierda a derecha. El eje transversal permanece de arriba a abajo.
  2. row-reverseinvierte la dirección de la fila de derecha a izquierda. De nuevo, el eje transversal no se ve afectado.

3. columncambia el eje principal del eje horizontal al eje vertical. Lo que significa que el eje principal ahora fluye de arriba hacia abajo, mientras que el eje transversal fluye ahora de izquierda a derecha.

4. column-reversees similar al valor de la columna con la única diferencia de que el eje principal ahora fluye de abajo hacia arriba.

Envoltura flexible

El contenedor flexible por defecto no permite que los elementos ocupen varias líneas seguidas. En su lugar, todos los elementos se aplastarán para que quepan en una fila, es decir, no se permite ajustarlos en varias líneas.

  1. flex-wrap: no-wrap es el predeterminado.

2 flex-wrap: wrap.. Al cambiar esa propiedad a wrap, ahora podemos asegurarnos de que cada elemento flexible mantendrá sus respectivos tamaños. Si no caben en una línea, se ajustarán a la siguiente fila o columna según la dirección de flexión.

Si la dirección de flexión se ha establecido en reversa de fila, los elementos pasarán a la siguiente fila comenzando de derecha a izquierda.

3. wrap-reversepor otro lado, envolverá la siguiente fila de elementos flexibles por encima de la inicial, aún de izquierda a derecha.

Justificar contenido

Esta propiedad se utiliza con mucha frecuencia. Su propósito es distribuir el espacio entre elementos flexibles en un contenedor flexible a lo largo del eje principal . Su valor predeterminado está establecido en flex-start.

Recuerde: si flex-direction se ha establecido en column, el eje principal ahora fluirá de arriba a abajo. Lo que significa que justify-content ahora distribuiría los elementos de forma vertical.

Alinear elementos

Esta propiedad es tan popular como justify-contenty se usa regularmente con flexbox. Hace lo mismo que justify-contentcon la única diferencia de que funciona a lo largo del eje transversal . El valor predeterminado de align-itemses stretch.

Recuerde: si flex-direction se ha establecido en column, el eje transversal ahora fluirá de izquierda a derecha. Lo que significa que align-items ahora estaría distribuyendo los elementos de forma horizontal.

Alinear contenido

Esta propiedad es similar y se puede confundir fácilmente con align-items. El propósito de esta propiedad es determinar cómo se debe distribuir el espacio entre filas en un contenedor flexible a lo largo del eje transversal .

Mientras que align-itemsapunta al espacio entre elementos flexibles, align-contentapunta a filas entre los elementos. El valor predeterminado de align-contentes stretch.

Propiedades del elemento flexible

Es hora de pasar al segundo tipo de propiedades de caja flexible que nos permite apuntar a los elementos individuales dentro de un contenedor flexible.

Alinearse a sí mismo

Esta propiedad le permite alinear un elemento flexible individual a lo largo del eje transversal. Anula la alineación establecida en el contenedor align-items.

También tiene las mismas propiedades que align-items(ver arriba).

Orden

Esta propiedad nos permite reordenar las posiciones de los elementos flexibles individuales dentro de su contenedor flexible. De forma predeterminada, todos los elementos tienen asignado un valor de 0.

Al asignar un valor más bajo (-ve) o más grande (+ ve) ordera los elementos individuales, ese elemento específico se moverá para posicionarse de acuerdo con sus valores.

El orden seguirá la convención más lógica, es decir -ve, 0, + ve. El número más bajo irá al extremo izquierdo y el mayor al extremo derecho, asumiendo que todo lo demás está configurado como predeterminado. Si hay elementos a los que no se les ha asignado ningún valor nuevo, permanecen en 0.

Nota: Las casillas 1, 2, 5 y 6 en el ejemplo anterior todavía tienen el valor predeterminado de 0. Para aclarar, las seis casillas de arriba tienen los siguientes valores: -1, 0, 0, 0, 0, 1 .

Si desea colocar un cuadro delante del cuadro número 4, debe establecer su cuadro de destino en un orden de -2 o menos.

Flex-base, Flex-grow y Flex-Shrink

Hasta ahora, todos los elementos flexibles tenían el mismo tamaño. Veamos ahora cómo podemos hacer que un elemento flexible específico ocupe más espacio dentro de un contenedor flexible en comparación con los otros elementos dentro del mismo contenedor.

Base flexible

Esta propiedad especifica el tamaño ideal de un elemento flexible antes de colocarlo en un contenedor flexible. Funciona de manera similar al ancho cuando se trabaja con filas. Funciona como altura cuando se trabaja con columnas. Entonces, si estamos trabajando con columnas, y a un elemento se le ha dado altura y base flexible, la base flexible tendrá prioridad, ya que es la altura ideal que tomará un elemento flexible si hay suficiente espacio disponible.

Dicho esto, si no hay suficiente espacio y no hay altura o ancho asignado a los elementos. Los artículos tomarán la altura máxima o el ancho máximo disponible en el contenedor.

Flex-grow

Esta propiedad determina cómo pueden crecer los elementos flexibles para llenar el espacio no utilizado en un contenedor flexible.

Si asignamos un flex-grow: 1a todos los cuadros, todos ocuparán el espacio restante de manera uniforme, que también es su valor predeterminado. El número puede ser cualquier cosa, siempre que todos sean el mismo número.

Si le damos flex-grow: 1a un elemento y le damos a un segundo flex-grow: 2, entonces el segundo elemento ocupará dos veces más espacio no utilizado en comparación con el primero.

Esto se aplica tanto a filas como a columnas.

Contracción flexible

Esta propiedad determina cómo los flex-elementos se reducen cada vez que hay no hay suficiente espacio en un contenedor flexible.

El flex-shrink: 1es el valor predeterminado, lo que significa que todos los elementos se reducirán al mismo ritmo de forma predeterminada.

Nota:flex-shrink: 0; significa que este artículo específico nunca debe encogerse.

flex-shrink: 2; significa que este elemento específico debería encogerse más rápido que los otros en flex-shrink: 1;

Flexionar

Esta es la versión abreviada de flex-grow, flex-shrink y flex-base en ese orden en particular.

Si necesita usar los tres anteriores, simplemente podría usar algo como esto:

flex: 0 2 200px; donde 0 se refiere a flex-grow, 2 se refiere a flex-shrink y 200px se refiere a la base flexible respectivamente.

¡Felicidades!

¡Eso es! Estos son los ingredientes clave para convertirse en un maestro flexible. Y como ocurre con cualquier otra cosa en la vida y en el código, la práctica hace al maestro. Recomiendo encarecidamente poner en práctica esta guía para obtener una comprensión práctica. Un ejemplo podría ser comenzar con algo pequeño como una simple barra de navegación.

También puede consultar el enlace a mi colección Codepen en flex-box que utilicé para crear esos flexboxes en las imágenes de arriba y modificarlos para ver cómo cambian.

Gracias por leer esta guía sobre flexbox. Espero que haya sido útil e informativo. Si tiene alguna pregunta o desea compartir sus pensamientos sobre este tema, no dude en comunicarse a través de la sección de comentarios o por correo electrónico a [email protected]

Si esta lectura le pareció valiosa, muestre un poco de amor a este artículo, dejando algunos aplausos para que otros desarrolladores también puedan encontrarlo.

ZeeshaanMaudar - Descripción general

Código para la diversión Código para un cambio Código para el bien social - ZeeshaanMaudar github.com