El increíble poder de FlexBox

Sep 11, 2025

Cómo

[dieciséis]

FlexBox, o el diseño de la caja flexible, es un potente módulo de diseño CSS que brinda a los diseñadores web y desarrolladores una forma eficiente y sencilla de diseñar, alinear y distribuir elementos en un contenedor. Resuelve muchos problemas de diseño que hemos estado luchando para resolver durante mucho tiempo.

Conceptos básicos de FlexBox

En su forma más básica, FlexBox se compone de dos elementos: un contenedor flexible (o Padre Flex) y elementos Flex (Flex Children). Un contenedor flexible es un elemento que contiene (como un div ) Dada la propiedad de visualización flexionar . Los elementos Flex son elementos infantiles de un contenedor flexible, que se puede manipular a través de varias propiedades de visualización.

Los contenedores flexibles y los elementos flexibles tienen su propia gama de propiedades que se pueden combinar de diferentes maneras de crear una gama de diseños complejos. Los artículos dentro de un contenedor flexible se pueden colocar horizontal o verticalmente, alineados y distribuidos de varias maneras, y estirarse o encogerse para adaptarse al espacio disponible. Todas estas opciones le permiten crear fácilmente diseños receptivos.

Cómo usar FlexBox

Para comenzar a usar FlexBox, debe crear primero su contenedor flexible (el elemento principal que contendrá sus elementos flexibles). En este ejemplo, usaremos un div cuadra. Antes de que estamos siendo el elemento, agreguemos tres más. div Bloques dentro de nuestro contenedor flexible para actuar como los elementos FLEX. En este punto, los artículos serán apilados.

Con nuestras divisiones de niños en su lugar, podemos configurar la propiedad de visualización del contenedor de los padres a flexionar .

 Contenedor FLEX {
PANTALLA: FLEX;
}

Direcciones de diseño

La dirección de diseño es simplemente la dirección que sus elementos se distribuirán a sí mismos. La dirección predeterminada de un contenedor flexible es fila , que mostrará los elementos del niño horizontalmente. Puede cambiar el diseño a la vertical al configurar la dirección a columna .

 Contenedor FLEX {
PANTALLA: FLEX;
Dirección Flex: Fila;
}

Contenedor flexible {
PANTALLA: FLEX;
Dirección Flex: Columna;
}

Cualquiera que sea la dirección que configure en su contenedor flexible se denomina dirección 'principal', mientras que la otra dirección que no eligió se convierte en la dirección 'cruzada'. Por lo tanto, de forma predeterminada, la dirección principal será horizontal y la dirección transversal será vertical.

FlexBox también le permite revertir el diseño. Cuando se invierte, los niños de un contenedor FLEX se presentarán de derecha a izquierda (si la dirección es fila ) o de abajo hacia arriba (si la dirección es columna ).

 Contenedor FLEX {
PANTALLA: FLEX;
Dirección Flex: Reversa en fila;
}

Contenedor flexible {
PANTALLA: FLEX;
Dirección Flex: Columna-Reversa;
}

Esto puede ser útil si desea revertir el diseño en pantallas más pequeñas.

Por ejemplo, digamos en las pantallas de escritorio que desea mostrar texto en el lado izquierdo de la pantalla y una imagen a la derecha (consulte la imagen de tabla de surf arriba). En Mobile, esto movería la imagen debajo del texto. Al invertir la dirección, puede asegurarse de que la imagen aparezca sobre el texto en su lugar.

Ajustar la alineación

La configuración de FlexBox también le proporciona dos métodos diferentes para alinear el contenido: vertical y horizontalmente. Aquí están sus opciones de alineación horizontal para artículos dentro de un contenedor FLEX:

arranque flexible : Artículos establecidos hacia el inicio de la fila (izquierda, a menos que haya invertido el diseño)

centrar : Artículos centrados dentro de la fila

fin de flexión : Artículos establecidos hacia el final de la fila (derecha, a menos que haya invertido el diseño)

espacio entre : Artículos distribuidos uniformemente a lo largo de la fila

de todo el espacio : Artículos distribuidos uniformemente a lo largo de la fila, con espacio igual a cada lado de cada elemento

Así que el código podría parecer esto:

 Contenedor FLEX {
PANTALLA: FLEX;
Dirección Flex: Fila;
Alinee-Contenido: Flex-Start | Flex-Fin | Centro | espacio entre | Espacio-alrededor | tramo;
}

Aquí están sus opciones de alineación vertical para los artículos en un contenedor FLEX:

arranque flexible : Artículos alineados en la parte superior de la fila

centrar : Los artículos están centrados dentro de la fila

fin de flexión : Artículos alineados en la parte inferior de la fila

tramo : Artículos estirados a través de la altura de la fila.

base : Artículos alineados en sus líneas de base (la línea imaginaria en la que se encuentra el texto)

El código podría parecer esto:

 Contenedor FLEX {
PANTALLA: FLEX;
Dirección Flex: Fila;
Alinee-Artículos: Flex-Start | Flex-Fin | Centro | línea de base | tramo;
}

De forma predeterminada, los niños de un contenedor flexible siempre intentarán caber en una sola línea. Si quieres cambiar esto, puedes agregar el envoltura atributo. Esto permite que los niños se envuelvan a una nueva línea si se queden sin espacio.

 Contenedor FLEX {
PANTALLA: FLEX;
Flex-Wrap: Wrap;
}

Los elementos flexibles también obtienen sus propias propiedades basadas en Flex. Cuando se coloca un elemento dentro de un contenedor FLEX, se convierte automáticamente en un niño flexible, y se otorga su propio conjunto de estilos CSS basados en Flex. Estos estilos controlan el tamaño, la alineación y el orden de visualización.

Dimensionamiento flexible

Flex Los niños pueden alterar su ancho o altura (dependiendo de la dirección de diseño del contenedor) para llenar el espacio disponible.

WebFlow le brinda tres opciones preestablecidas para la dimensionamiento flexible: encogerse si es necesario, rellene el espacio vacío y no se encienda. Tenga en cuenta que cada elemento secundario puede tener su propia configuración, que permite una plétora de opciones de diseño.

 Artículo FLEX {
Flex-Shrink: & lt; Number & GT ;;
Flex-Grow: & lt; Number & GT ;;
Flex-base: & lt; longitud & gt; | auto;
}

Echemos un vistazo a lo que hace cada una de estas opciones:

Reducir si es necesario: Tallas del artículo basado en su ancho / altura o su contenido. El artículo no crecerá más de lo que necesita, pero puede reducirse a su tamaño mínimo para evitar el desbordamiento
Rellenar el espacio vacío: Permite que el artículo se expanda para llenar todo el espacio disponible dentro de su padre. Si configura esto en todos los elementos en un contenedor FLEX, se expandirán para ocupar cantidades iguales de espacio vacío
No encoge: Tamaliza el artículo basado en su ancho / altura o su contenido, pero no le permite encogerse, incluso si eso causará un desbordamiento

Los elementos Flex también pueden tener su propia configuración de alineación, que anulan la alineación predeterminada establecida por su contenedor de padres flexibles. Estas alineaciones se comportan como se explican anteriormente.

 Artículo FLEX {
PANTALLA: FLEX;
Dirección Flex: Fila;
Alinee-Artículos: Flex-Start | Flex-Fin | Centro | línea de base | tramo;
}

De forma predeterminada, se muestran los elementos FLEX en el mismo orden que aparecen en el código fuente. Con FlexBox, puede anular este comportamiento para asegurarse de que se muestren los elementos en exactamente el orden que desee.

Las son cuatro opciones principales que puedes usar aquí:

Auto : El valor predeterminado, que ordena los artículos como están en la fuente
Primero : El artículo aparece primero en su contenedor flexible
Último : El artículo aparece el último en su contenedor FLEX
Personalizado : Puede personalizar el pedido su artículo se mostrará en

El orden personalizado se puede definir como un número, que especifica el orden en que aparece el elemento Flex dentro de un contenedor FLEX.

 Artículo FLEX {
Orden: & lt; entero & gt ;;
}

¿Por qué debería usarlo?

Me alegra que hayas preguntado! El uso de FlexBox le permite crear fácilmente diseños receptivos que una vez fueron muy difíciles (o imposibles) para crear con módulos de diseño CSS más antiguos.

Eche un vistazo a los ejemplos en la imagen de abajo, muchos de los cuales probablemente ya haya visto en la web. Casi todos ellos tomarían una cantidad considerable de CSS (especialmente en diferentes tamaños de pantalla), pero solo tomaría algunas líneas simples para lograr con FlexBox. Para ver estos ejemplos en acción, visite FlexBox.WebFlow.com .

El increíble poder de FlexBox

Conceptos básicos de FlexBox

Cómo usar FlexBox

Direcciones de diseño

Ajustar la alineación

Dimensionamiento flexible

¿Por qué debería usarlo?

Cómo - Artículos más populares

Cómo limpiar los pinceles: la guía definitiva

Cómo dibujar un lobo

Cómo crear simulaciones de agua

Cómo crear efectos líquidos con WebGL

Cómo convertir el día en la noche en Photoshop

Cómo hacer un Mandelbulb

7 formas asesinas para influir en el comportamiento del usuario

15 consejos para la optimización de dispositivos cruzados

Categorías