Propiedades del contenedor Flexbox en CSS | Explicado

El modelo de diseño de FlexBox presenta una forma de diseñar sitios web receptivos, y para hacerlo, proporciona numerosas propiedades de contenedores flexibles y elementos FlexBox. Para trabajar con CSS Flexbox, necesitamos un contenedor donde colocaremos los elementos FlexBox y para crear un contenedor Flexbox, necesitamos utilizar la propiedad de visualización y establecer su valor como Flex o Flex en línea. Además, CSS proporciona una amplia gama de propiedades del contenedor Flexbox para alterar el comportamiento de un contenedor FlexBox.

Esta redacción cubrirá los aspectos que sean a continuación de un contenedor CSS FlexBox:

• ¿Qué es un contenedor Flexbox??
• Propiedades del contenedor Flexbox en CSS
• Cómo implementar las propiedades del contenedor Flexbox en CSS?

Entonces, comencemos!

¿Qué es un contenedor Flexbox?

El contenedor flexible es una caja/contenedor que puede contener numerosos elementos flexibles como se muestra en la figura a continuación:

El área azul oscuro representa un recipiente flexible en el fragmento anterior, mientras que el área azul claro representa elementos flexibles.

Propiedades del contenedor Flexbox en CSS

CSS proporciona numerosas propiedades de contenedores FlexBox que se pueden utilizar para varios fines como se describe en las tablas dadas a continuación:

Propiedades	Descripción
mostrar	Determina el tipo de contenedor flexible i.mi. en línea, bloque.
dirección flexible	Especifica la dirección de los elementos dentro del contenedor, como fila, reverso de fila, etc.
holgazán	Determina el comportamiento de envoltura de los elementos de Flexbox i.mi. envolver o no.
flujo flexible	Proporciona las funcionalidades de Flex-Wrap y Flex-Direction.
flujo flexible	Proporciona las funcionalidades de Flex-Wrap y Flex-Direction.
Justify-Content	Alinea los elementos FlexBox a lo largo del eje principal.
ítems alineados	Alinea los elementos a lo largo del eje cruzado.
alineado	Alinea las líneas del contenedor flexible.
brecha	Controla explícitamente los espacios entre los elementos flexibles.

Propiedad Flex-Direction en CSS

CSS 3 proporciona un dirección flexible Propiedad que se puede utilizar para especificar la dirección de los elementos dentro del contenedor FlexBox. Utilizando el dirección flexible Propiedad, podemos especificar la dirección del elemento desde el fondo superior, la parte inferior de la izquierda y la derecha izquierda.

Sintaxis

El fragmento a continuación proporcionará la sintaxis básica de la propiedad CSS Flex-Direction:

Dirección flexible: fila | columna | Row-Reverse | columna-reverse;

Los valores descritos en el fragmento anterior se pueden usar para especificar los elementos FLEX horizontal, verticalmente, horizontalmente pero en orden inverso, verticalmente pero en orden inverso, respectivamente.

Propiedad Flex-Wrap en CSS

Para envolver los elementos del contenedor Flexbox holgazán La propiedad se puede usar. Puede tomar uno de los dos valores que.mi. envoltura o nower. Especificando el "envoltura" El valor envolverá los elementos del contenedor Flexbox. sin embargo, el "Nowrap" El valor se utilizará si no desea envolver los elementos del contenedor FlexBox.

Sintaxis

El fragmento a continuación proporcionará la sintaxis básica de la propiedad CSS Flex-Wrap:

Flex-Wrap: Wrap | Nowrap | Wrap-Reverse;

Los valores descritos en el fragmento anterior especifican si los elementos flexibles se envolverán, no envuelven o se envolverán en orden inverso, respectivamente.

Propiedad Flex-Flow en CSS

El flujo flexible la propiedad se puede utilizar para aprovechar las funcionalidades de ambos dirección flexible y holgazán propiedades.

Sintaxis

El fragmento a continuación proporcionará la sintaxis básica de la propiedad CSS Flex-Flow:

Flex-Flow: Flex-Direction Flex-Wrap;

Propiedad de contenido de justificación en CSS

Se utiliza para alinear los elementos del contenedor en diferentes direcciones, como Start, End, Center, etc.

Sintaxis

El siguiente fragmento proporcionará la sintaxis básica de la propiedad de contenido de Justify CSS:

Justify-Content: Center | flujo flexible | Flex-End | Espacio entre | Space -venly | espacial;

Los valores del centro, el arranque flexible y el extremo flexible se utilizan para colocar los elementos flexibles en el centro, el inicio y el final del contenedor, respectivamente. El valor entre espacios especiales especificará el espacio entre los elementos flexibles, el valor de incluso espacio especificará el espacio igual alrededor de los elementos flexibles, mientras que el espacio-solución especificará el espacio antes, entre y después de los elementos flexibles.

Alinearse la propiedad en CSS

El valor predeterminado de esta propiedad es el estiramiento que estira los elementos flexibles para que se ajusten al contenedor.

Sintaxis

El fragmento a continuación muestra qué valores puede tomar la propiedad Aline-Items:

Alineación de ítems: estiramiento | flujo flexible | centro | Flex-End | base;

Los valores Flex-Start, Center y Flex-End se utilizan para colocar los elementos en el inicio, el centro y al final del contenedor, mientras que el valor de línea de base coloca los elementos Flex en la línea de base del contenedor.

Propiedad de alineación de contenido en CSS

Se utiliza para alinear las líneas flexibles y su valor predeterminado es el estiramiento.

Sintaxis

El siguiente fragmento mostrará la sintaxis básica de la propiedad alineada y contenido:

Alineado-contenido: estiramiento | flujo flexible | centro | Flex-End | espacial | espacial entre;

Propiedad GAP en CSS

Controla explícitamente los espacios entre los elementos flexibles. Especifica el tamaño de la brecha entre columnas y filas.

Sintaxis

El siguiente fragmento mostrará la sintaxis básica de la propiedad alineada y contenida:

GAP: ROW-GAP columna-GAP;

Los valores dados anteriormente establecen el tamaño del espacio entre filas y columnas respectivamente.

Cómo implementar las propiedades del contenedor Flexbox en CSS

En esta sección, implementaremos los conceptos teóricos descritos anteriormente prácticamente.

Ejemplo

En este ejemplo, implementaremos Propiedades de visualización, alineación de elementos, dirección flexible y brecha:

Contenedor flexbox

Primer elemento
Segundo artículo
Tercer artículo
Cuarto artículo
Quinto artículo

El siguiente fragmento mostrará la salida respectiva para el fragmento de código anterior:

La salida dada anteriormente autentica el funcionamiento de las propiedades del contenedor FlexBox.

Conclusión

El contenedor flexible es una caja/contenedor que puede contener numerosos elementos flexibles. CSS proporciona numerosas propiedades de contenedores FlexBox que se pueden utilizar para diversos fines. Por ejemplo, la propiedad de visualización determina el tipo de contenedor flexible; La propiedad Flex-Direction especifica la dirección de los elementos dentro del contenedor, como una fila, reverso de fila, etc. Este artículo presenta una guía completa para las propiedades del contenedor Flexbox, su sintaxis y cómo usarlas en CSS.