Contenedor flexible en CSS | Explicado

El modelo de diseño de FlexBox proporciona una disposición eficiente y dinámica de elementos colocándolos dentro de un contenedor con espacio igualmente distribuido. Este diseño hace que los elementos respondan, lo que significa que los elementos cambian su comportamiento de acuerdo con el tipo de dispositivo que los muestra. Consta de dos componentes que son, contenedores flexibles y elementos flexibles. Sin embargo, aquí solo enfatizaremos los contenedores flexibles. Los sujetos discutidos son.

1. ¿Qué es un contenedor flexible?
2. Propiedades de contenedor flexible

¿Qué es un contenedor flexible??

Este es un componente de una caja flexible que define las propiedades del elemento ancestro al establecer su pantalla en flexión o flexión en línea.

Las propiedades asociadas con el contenedor flex se explican aquí.

Propiedades de contenedor flexible

Propiedades relacionadas con un contenedor flexible.

1. propiedad de dirección flexible
2. propiedad Flex-Wrap
3. propiedad de flujo flexible
4. Propiedad Justify-Content
5. Alineación de propiedades de ítems
6. propiedad de alineación de contenido

Estas propiedades se explican en detalle a continuación.

propiedad de dirección flexible

Con el fin de establecer la dirección de los elementos presentes en un FlexBox, se utiliza la propiedad Flex-Direction.

Sintaxis

Dirección flexible: fila | ROW-Reverse | columna | columna -reverse | inicial | heredar;

Parámetros explicados

fila: Este valor predeterminado organiza los elementos horizontalmente.

reverso: Este valor coloca elementos en una fila pero con dirección inversa.

columna: Organiza los artículos verticalmente.

reverso de columna: Organiza los elementos en una columna pero de manera inversa.

Ejemplo

El siguiente ejemplo demuestra el funcionamiento de la propiedad Flex-Direction.

Html

Artículo 1
Artículo 2
Artículo 3
Artículo 4

Aquí hemos anidado cuatro contenedores Div dentro de un contenedor Div más grande y lo asignamos una clase "FlexBox".

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Dirección flexible: reverso de fila;

En el código anterior, estamos mostrando el div más grande como un contenedor flexible y dándole algo de color, y finalmente su dirección está configurada para reverso de fila.

CSS

.Flexbox div
Color de fondo: LightGrey;
Ancho: 150px;
margen: 15px;
relleno: 20px;
tamaño de fuente: 35px;

Ahora estamos diseñando nuestros elementos dentro del contenedor utilizando varias propiedades CSS.

Producción

Los elementos flexibles se colocan en la misma fila pero en orden inverso.

propiedad Flex-Wrap

Esta propiedad establece si los elementos deben envolverse alrededor de la línea flexible o no.

Sintaxis

Flex-Wrap: Nowrap | envoltura | Wrap-Reverse | inicial | heredar;

Parámetros explicados

nower: Este valor predeterminado no envuelve elementos.

envoltura: Envuelve los elementos si es necesario.

reverso de envoltura: Envuelve los elementos si es necesario pero de manera inversa.

Ejemplo

Así es como esta propiedad envuelve los elementos dentro del FlexBox. Para ver el efecto de esta propiedad, debe cambiar el tamaño de la ventana del navegador.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Flex-Wrap: envoltura;

En el código anterior, hemos establecido la propiedad Flex-Wrap para envolver. Este valor envuelve los elementos dentro de un contenedor.

CSS

.Flexbox div
Color de fondo: LightGrey;
Ancho: 150px;
margen: 15px;
relleno: 20px;
tamaño de fuente: 35px;

Usando algunos CSS básicos, hemos diseñado nuestros elementos flexibles.

Producción

Los artículos flexibles han sido envueltos.

propiedad de flujo flexible

Establece la dirección de los elementos mientras especifica si envolver elementos o no. Esta es una propiedad taquigrafía para la dirección de flujo y la envoltura de flujo.

Sintaxis

FLEX-FLOW: flujo de flujo de flujo-envoltura | inicial | heredar;

Parámetros explicados

dirección del flujo: Define la dirección de los elementos.

envasado: Establece si los elementos deben estar envueltos o no.

Ejemplo

Considere el siguiente ejemplo para comprender el funcionamiento de esta propiedad.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Flex-flujo: envoltura de reverso de fila;

Usando la propiedad de taquigrafía, hemos establecido la dirección de los elementos flexibles como reverso de fila mientras los envolvemos usando el valor de envoltura.

Producción

Los artículos han sido envueltos en filas de manera inversa.

Propiedad Justify-Content

Si los elementos en un FlexBox no consumen completamente el espacio horizontal, entonces la propiedad Justify-Content los alinea a través del eje principal.

Sintaxis

Justify-Content: Flex-Start | Flex-End | centro | Espacio entre | Espacio | Space -venly | inicial | heredar;

Parámetros explicados

arranque flexible: Posiciona elementos al comienzo del contenedor y es el valor predeterminado.

gama flexible: Esto coloca los elementos al final del contenedor.

centro: Esto posiciona los elementos en el centro del contenedor.

espacio entre: Agrega espacio entre los elementos.

espacial: Agrega espacios antes, entre y después de cada elemento.

espacio-incluso: Esto le da a cada elemento espacios iguales.

Ejemplo

Supongamos que desea justificar su contenido hasta el final del contenedor flexible.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Justify-Content: Flex-End;

El valor de extremo flexible colocará todos los elementos flexibles al final del contenedor.

Producción

La propiedad funciona correctamente.

Alineación de propiedades de ítems

Esta propiedad establece la disposición de elementos en un contenedor verticalmente.

Sintaxis

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

Parámetros explicados

estirar: Es un valor predeterminado que estira los elementos para que se ajusten en el contenedor.

centro: Esto posiciona los elementos en el centro del contenedor.

arranque flexible: Posiciona elementos al comienzo del contenedor y es el valor predeterminado.

gama flexible: Esto coloca los elementos al final del contenedor.

base: Esto posiciona los elementos en la línea de base del contenedor.

Ejemplo

Aquí estamos demostrando el valor central de la propiedad Aline-items.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Altura: 200px;
Alineación de ítems: Centro;

Para demostrar esta propiedad correctamente, proporcionamos cierta altura al contenedor flexible y estableciendo la propiedad Aline-Items en el centro.

Producción

Los artículos se han alineado verticalmente en el centro del contenedor.

propiedad de alineación de contenido

Altera el comportamiento de la propiedad Flex-Wrap y es bastante similar a la propiedad de contenido de Justify, con la única diferencia que alinea los elementos flexibles veritalmente.

Sintaxis

Alineado-Contente: Flex-Start | Flex-End | centro | Espacio entre | Espacio | Space -venly | inicial | heredar;

Parámetros explicados

arranque flexible: Posiciona elementos al comienzo del contenedor y es el valor predeterminado.

gama flexible: Esto coloca los elementos al final del contenedor.

centro: Esto posiciona los elementos en el centro del contenedor.

espacio entre: Agrega espacio entre los elementos.

espacial: Agrega espacios antes, entre y después de cada elemento.

espacio-incluso: Esto le da a cada elemento espacios iguales.

Ejemplo

Para comprender cómo funciona la propiedad de alineación de contenido alineado, vea el ejemplo a continuación.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Altura: 300px;
Flex-Wrap: envoltura;
Alineado-contenido: espacial;

Aquí hemos aumentado aún más la altura del contenedor para que pueda comprender esta propiedad de una mejor manera. Por último, hemos asignado la propiedad alineada y contenida el valor espacial.

Producción

El espacio alrededor de cada elemento se agregó verticalmente con éxito.

Conclusión

Flex Container, que es un componente de una caja flexible, define las propiedades del elemento ancestro al establecer su pantalla en flexión o en línea?. CSS proporciona muchas propiedades que están conectadas al contenedor flexible y se pueden utilizar para definir las características del contenedor flexible. Pocas de las propiedades vinculadas al contenedor Flex son; Dirección flexible, alineación contente, alineación de elementos, flujo flexible, etc. Cada una de estas propiedades se explica en detalle junto con ejemplos relevantes.