Orden flexible CSS

Se utiliza una Flexbox o elemento para contener contenido HTML en él. Se utiliza una propiedad CSS Flex para aplicar los efectos de las longitudes flexibles en artículos flexibles. Una hoja de estilo en cascada ofrece la propiedad del orden utilizado para organizar los elementos flexibles. Para aplicar la propiedad de pedido, los elementos dentro del FlexBox deben ser flexibles. De lo contrario, la propiedad no se verá afectada.

Creación y pedido de flexión

En este ejemplo, hemos utilizado un DIV simple para agregar más divs dentro de él, creando un fenómeno de Div Nesting Div. El Div exterior se conoce como una caja flexible para varios contenidos dentro de él. Su Div Exterior es el Div principal que lleva varios Divs dentro de él. Se declara con una clase CSS para aplicar algunos efectos CSS en él. Esta clase se describe en la sección principal con la etiqueta de estilo formando un CSS interno.

Dentro del div, se declaran cuatro divs más. Cada div se refirió a la flexión única. Agregaremos un estilo en línea aquí para agregar color a cada flexión. Cada div también se entretiene aún más con las ID de CSS. Estas ID de todas las ID son responsables de aplicar todos los efectos en la flexión que se organizan en un orden apropiado.

IDS y clase CSS

En este punto, es necesario elaborar estas dos terminologías de CSS. Mientras discutimos las propiedades de CSS afectadas, estas ID y clases juegan un papel esencial en la aplicación de cualquier efecto sobre los contenidos HTML. Cada vez que hablamos de CSS interno y externo, nos encontramos con identificaciones y clases. Estas identificaciones y clases tienen el color, el estilo de texto, las dimensiones y muchos otros efectos sobre los contenidos declarados en la sección del cuerpo. Para acceder a estos efectos de las clases e ID, debemos mencionar que se nombran en la etiqueta de contenido, al igual que la ID "One". Y todas las identificaciones de primera a cuarta también se declaran.

Volviendo al código HTML, aquí con cada Div o Flex interno, también hemos utilizado el texto que mostrará el pedido más claramente. Esto ocurre cuando la oración se forma organizando el flex en el orden apropiado. La dirección del orden del flex es la elección del usuario. Podemos numerar el Flex al azar. Estas caja flexible se forman cuando se les aplica el estilo CSS. Ahora, consideremos el código CSS.

Primero declararemos la identificación que pertenece al Div exterior dentro de la etiqueta de estilo. Este DIV especificará el área en la que se forman todos los Divs internos. Agregaremos propiedades de ancho, altura y borde a esta identificación. Una característica importante que se utiliza para formar una flexión es el efecto de "pantalla". Debido a que se elimina esta propiedad, se formarán rectángulos simples en la página web. Estas flexiones se formarán utilizando esta propiedad de visualización:

#uno
Pantalla: Flex;

Flex generalmente se forma en una dirección horizontal de izquierda a derecha. Muy bien, esto fue para el Div Exterior. Para agregar dimensiones a todos los Div o Flex interno, usaremos la identificación "Uno" con Div. Estas propiedades incluyen el ancho y la altura de un solo bloque o flexión. La altura de la división interna individual es igual a la altura del Div exterior. Mientras que el ancho del Div exterior se divide en los cuatro divs internos. Esto se hace declarando la descripción de ID reacesada por cada flexión dentro de la etiqueta con los diferentes nombres de ID para cada flexión. Cada nombre Div se da de acuerdo con el pedido. Por ejemplo, el primer div contiene la orden como 1. No importa en qué orden declare el código en CSS o HTML, pero el número de pedido decidirá el orden de cada flexión.

Div#primero
Orden: 1

Cierre todas las etiquetas. Ahora, guarde el código con la extensión HTML para abrirlo como texto y una página web.

En la ejecución, dentro del navegador, verá que el orden en el que ha definido cada div interno o el flex se muestra con los bloques de colores respectivos, lo que hace que la flexión sea correcta. Además, el texto agregado con cada etiqueta DIV interna muestra que la oración se forma organizando el flex en orden. Esto muestra que el orden que hemos mencionado se sigue con precisión.

Orden inverso de flexión

Con Flexbox y Flex Creation, es visible que no sea necesario mencionar ningún flujo flexible en el código. Por defecto, el flujo flexible está en una dirección horizontal, y el orden se sigue de la misma manera que se describe, es decir, por defecto, orden ascendente. Pero, una vez que haya declarado el orden de flexión en la creación flexible, puede revertirlo mencionando la dirección del flex.

#uno
Dirección flexible: reverso de fila;

Esta propiedad se agrega al FlexBox o al Div Exterior, ya que es responsable de contener flexiones internas dentro de él. Y si desea usar el pedido predeterminado, elimine esta propiedad de dirección por completo o agregue la dirección flexible como "fila". Volverá a hacer el orden ascendente.

En la ejecución, verá que todo el orden de flexión se invierte, puede ver claramente a través de los colores de Flex y el texto de la oración se invierte en consecuencia.

Flexión vertical

Como hemos descrito anteriormente, no se describe la dirección de Flex. Por defecto, está en la dirección horizontal que tiene una sola columna y múltiples filas. Pero, para hacer una flexión vertical, entonces la dirección del Flexbox se cambia de la fila a las columnas.

#uno
Dirección flexible: columna;

Al usar esta función, se formará una FlexBox vertical, que tiene todo el Flex Div intacto, y el orden de todo el Flex será el mismo.

Reordenar flexbox

La FlexBox se puede reordenar especificando cualquier flexión dentro de la caja para llegar en la primera posición. Hemos elegido el tercero que recibe un orden de -1, el color del texto cambia de negro a rojo y el tamaño también aumenta para discriminarlo de otros.

Esta tercera flexión se eliminará de la lista de pedidos. Al hacer esto, el pedido no se mantendrá. La caja que llegará a la primera posición perturbará el orden de todo el div.

En la ejecución, verá que el primer bloque se mueve hacia la derecha para formar un lugar para los 3^rd bloquear. De esta manera, podemos reordenar el FlexBox especificando cualquier Flex.

Conclusión

En este artículo, tratamos de describir la propiedad del orden Flex CSS creando un contenido flexible y flexible dentro de él. El orden flexible se aplica agregando colores y texto a la flexión que muestra que el orden que hemos mencionado se mantiene. Además, podemos revertir el orden mencionando el flujo de dirección flexible en orden invertido. La dirección horizontal es la dirección predeterminada del flex; También se puede cambiar en la dirección vertical cambiando la dirección de la fila en la columna. Todos estos efectos se explican mediante el uso de códigos especificados para explicar el concepto de orden flexible.

.