Artículos flexibles en CSS | Explicado

Flexbox es un modelo de diseño que alinea elementos dentro de un contenedor dinámicamente asignándoles un espacio distribuido igualmente. Este diseño resulta útil para hacer que los elementos respondan, lo que significa que los elementos alterarán su comportamiento de acuerdo con el tipo de dispositivo que los muestra. Este modelo consta de dos componentes que son contenedores flexibles y elementos flexibles. Sin embargo, nuestro enfoque en este artículo estará en contenedores flexibles. Los sujetos discutidos en este artículo son los siguientes.

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

¿Qué es un elemento flexible?

Un elemento flexible describe las propiedades de los elementos sucesores, además, puede haber numerosos elementos flexibles presentes dentro de un contenedor flexible.

Estos elementos hacen que algunas propiedades que se explican en detalle a continuación.

Propiedades de elemento flexible

Las siguientes propiedades están asociadas con un elemento flexible.

orden de orden

Con el fin de definir el orden de un elemento flexible en relación con otros elementos presentes en una caja flexible, se utiliza la propiedad de pedido.

Sintaxis

Orden: Num | inicial | heredar;

Parámetros explicados
numer: Este valor define el orden de un elemento flexible. Por defecto, el valor es 0.

Ejemplo
Aquí hay un ejemplo de la propiedad de la orden.

Html

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

En el código anterior, se creó un contenedor div y se anidaron cuatro divs más dentro de él. A cada uno de los divisos se le ha asignado alguna identificación.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;

Aquí, el div más grande se ha mostrado como un contenedor flexible y se le ha proporcionado un color de fondo.

CSS

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

Ahora estamos diseñando nuestros elementos presentes dentro del contenedor flexible con algunas propiedades básicas de CSS.

CSS

#Artículo 1
Orden: 4;

#item2
Orden: 1;

#item3
Orden: 2;

#item4
Orden: 3;

En el código anterior, estamos utilizando la identificación de cada elemento para proporcionarle algún pedido.

Producción

Cada artículo ha sido colocado de acuerdo con su pedido.

propiedad de cultivo flexible

Esta propiedad describe la medida en que un elemento crecerá en relación con los otros elementos presentes dentro del contenedor.

Sintaxis

Flex-Crow: Número | inicial | heredar;

Parámetros explicados
número: Este valor establece el alcance del crecimiento de un elemento. Por defecto, el valor es 0.

Ejemplo
Supongamos que solo queremos hacer crecer un elemento con respecto a otros. Así es como lo haces.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;

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

#Artículo 1
Flex-Crow: 15;

Establecemos el valor de la propiedad Flex-Crow en 15. El artículo 1 será 15 veces mayor en comparación con otros elementos.

Producción

La propiedad funciona correctamente.

propiedad Flex-Shrink

Esta propiedad define la medida en que un elemento se reducirá en relación con los otros elementos presentes dentro del contenedor.

Sintaxis

Flex-Shrink: número | inicial | heredar;

Parámetros explicados
número: Establece en qué medida se encoge un elemento. Por defecto, el valor es 0.

Ejemplo
Aquí hay un ejemplo de esta propiedad.

Html

1
2
3
4
5

Para comprender el funcionamiento de esta propiedad, hemos creado un contenedor div más grande y anidados cinco contenedores Div más dentro del más grande. Además, a cada DIV se le ha asignado un color de fondo diferente para que el concepto de esta propiedad se pueda demostrar correctamente.

CSS

.envase
Pantalla: Flex;
Ancho: 400px;
Altura: 200px;

.contenedor div
Flex-Básis: 100px;

Aquí estamos mostrando el div más grande como una caja flexible, además, también le estamos dando algo de ancho y altura. Por último, estamos configurando su base flex en 100px que define la longitud inicial de un elemento flexible.

CSS

.artículo
Flex-Shrink: 4;

Usando la clase asignada a los dos últimos contenedores DIV, establecemos su Flex-Shrink en 4, lo que significa que estos elementos serán 4 veces más pequeños que otros elementos en la cuadrícula.

Producción

Los elementos 4 y 5 son más pequeños que el resto de los artículos.

Propiedad Flex-Basis

Con el fin de establecer la longitud inicial de un elemento flexible, se utiliza la propiedad Flex-Basis.

Sintaxis

Flex-Basis: Auto | Num | inicial | heredar;

Parámetros explicados
auto: Es un valor predeterminado que proporciona un elemento con la longitud igual a la del elemento flexible.

numer: Establece la longitud original de un artículo.

Ejemplo
Supongamos que desea darle a un elemento flexible algo de longitud inicial. Hemos demostrado cómo se hace.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;

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

#item3
Flex-Básis: 300px;

Establecemos la base flex del artículo 3 a 300px, lo que significa que la longitud original del tercer elemento será de 300 pxx.

Producción

La longitud inicial del tercer elemento se estableció con éxito.

propiedad flexible

Esta propiedad establece el crecimiento, la contracción y la longitud de un artículo a la vez. Es una propiedad en taquigrafía para el crecimiento flexible, Flex-Shrink y Flex-Basis.

Sintaxis

Flex-Property: Flex-Grow Flex-Shrink Flex-Basis | inicial | heredar;

Parámetros explicados
flácido: Especifica el crecimiento del elemento flexible con respecto a otros elementos en el contenedor.

Flex-shrink: Establece la contracción de un artículo en relación con otros artículos

basis flexible: Proporciona la longitud inicial de un artículo.

Ejemplo
Consulte el siguiente ejemplo para comprender la propiedad Flex.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;

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

#item2
flexión: 0 0 300px;

Usando la propiedad abreviada, el crecimiento y la contracción del segundo elemento se han establecido en 0, lo que significa que este elemento no crecerá ni encogerá, sin embargo, tendrá una longitud de 300px.

Producción

La propiedad funciona correctamente.

propiedad alineada

Con el fin de describir la disposición de los elementos dentro de un contenedor flexible, se utiliza la propiedad Aline-Self.

Sintaxis

Alinine-Self: Auto | estiramiento | centro | flujo flexible | Flex-End | línea de base | inicial | heredar;

Parámetros explicados
auto: Este es un valor predeterminado que hereda las características del contenedor de antepasados ​​o si no hay un contenedor antepasado, entonces estira el artículo.

estirar: 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
Considere el ejemplo a continuación para comprender la propiedad Alinine-Self.

CSS

.Flexbox
Pantalla: Flex;
Color de fondo: aguamarina;
Altura: 250px;

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

Aquí hemos proporcionado cierta altura al contenedor flexible para mostrar el concepto de esta propiedad de manera clara, mientras tanto, el resto del código es el mismo que el anterior.

CSS

#item2
Alineado-Self: Flex-End;

#item3
Alineado-Self: Flex-Start;

Usando los ID asignados, el elemento 2 se ha colocado al final del contenedor, sin embargo, el elemento 3 se ha colocado al comienzo del contenedor.

Producción

Ambos elementos se colocaron de manera diferente utilizando la propiedad alineada.

Conclusión

Un elemento flexible es un componente de una caja flexible que define las propiedades de los elementos sucesores. Puede colocar numerosos elementos flexibles dentro de un recipiente flexible. Hay algunas propiedades de CSS asociadas con estos elementos, como orden, alineación, de crecimiento flexible, flexión, etc. Cada uno de estos representa múltiples valores y tiene un propósito diferente que hemos demostrado con la ayuda de ejemplos relevantes.