Propiedades de elementos FlexBox en CSS | Explicado
Este artículo lo ayudará a comprender los aspectos de la lista de los elementos CSS FlexBox:
- Artículos de FlexBox en CSS
- Propiedades de elementos FlexBox en CSS
- Cómo implementar propiedades de elementos FlexBox en CSS
Vamos a empezar!
Artículos de FlexBox en CSS
Mientras creamos el contenedor Flex en FlexBox, utilizamos la propiedad de visualización y le asignamos algún valor, como Flex, en línea. En ese momento, el hijo directo de ese contenedor flexible se convierte en el elemento flexible. La figura que se indica a continuación proporcionará una mejor comprensión:
Propiedades de elementos FlexBox en CSS
La siguiente tabla le proporcionará una breve descripción de las propiedades de FlexBox:
| Propiedades | Descripción |
|---|---|
| orden | Controla el orden de los elementos infantiles dentro del contenedor flexible. |
| flácido | Determina el factor de crecimiento para un elemento flexible. |
| Flex-shrink | Determina el factor de retiro para un elemento infantil/elemento flexible. |
| basis flexible | Determina el tamaño inicial de un elemento infantil/elemento flexible. |
| doblar | Es una propiedad en taquigrafía para tres propiedades Flex-Crow, Flex-Shrink y Flex-Basis. |
| alinearse | Permite que se anule la alineación predeterminada (a lo largo del eje cruzado) para elementos individuales de elementos infantiles/flexiones flexibles. |
Cómo implementar propiedades de elementos FlexBox en CSS
En esta sección, discutiremos cada propiedad de FlexBox mencionada anteriormente e implementaremos prácticamente para una comprensión profunda:
Ejemplo 1: Propiedad de pedido de CSS
Se necesita un valor numérico para ordenar los elementos en un orden específico. El fragmento de código a continuación le permitirá comprender cómo funciona la propiedad de pedido en un FlexBox:
Orden de orden
Primer elemento
Segundo artículo
Tercer artículo
Cuarto artículo
Quinto artículo
En el fragmento de código anterior, utilizamos la propiedad de pedido para organizar los elementos FlexBox de acuerdo con nuestra elección:
La salida muestra que la propiedad de pedido organizó los elementos FLEX de acuerdo con el pedido especificado por el usuario.
Ejemplo 2: propiedad CSS Flex-Grow
Se requiere un valor numérico que representa cuán rápido crecerá un elemento flexible en comparación con los otros elementos flexibles. Para la claridad de los conceptos, consideremos la siguiente pieza de código:
propiedad de cultivo flexible
Primer elemento
Segundo artículo
Tercer artículo
Cuarto artículo
Quinto artículo
En este ejemplo, el valor predeterminado para la propiedad Flex-Grow es 0, por lo que cada elemento del contenedor crecerá en consecuencia. Sin embargo, el segundo y cuarto elementos del contenedor crecerán doce en tiempo más rápido que otros elementos porque estos dos elementos especificaron el valor de la propiedad Flex-Grow como 12:
El fragmento anterior verificó el funcionamiento de la propiedad Flex-Grow.
Ejemplo 3: Propiedad CSS Flex-Basis
En el siguiente fragmento de código, implementaremos la propiedad Flex-Basis para establecer el tamaño del segundo y cuarto elementos del contenedor:
Propiedad Flex-Basis
Primer elemento
Segundo artículo
Tercer artículo
Cuarto artículo
Quinto artículo
Establecemos el valor de la propiedad Flex-Basis como 150px para el segundo y cuarto elementos. El código anterior generará la siguiente salida:
Del mismo modo, podemos utilizar las otras propiedades del elemento FlexBox para lograr diferentes funcionalidades.
Conclusión
El contenedor flexible o el elemento principal es una caja/contenedor que contiene múltiples elementos flexibles, mientras que todo dentro de un contenedor FlexBox se llama elemento FlexBox o elemento infantil. Para crear el contenedor Flex en FlexBox, utilizamos la propiedad de visualización y le asignamos un valor flexible o en línea; Como resultado, el hijo directo de ese contenedor flexible se convierte en el elemento flexible. En CSS, hay varias propiedades disponibles para trabajar con los elementos FlexBox, como los controles de pedido del orden de los elementos FlexBox, Flex-Crow determina el factor de crecimiento de los elementos Flex, etc. Este artículo cubrió varias propiedades del elemento FlexBox y explicó cómo usarlas para lograr sus funcionalidades.