Css flexible
Entre varias propiedades, existe una propiedad Flex CSS que se aplica a FlexBox. Un Flexbox es un contenedor que contiene más cajas o bloques conocidos como Flex. Una propiedad flexible se ocupa de la flexibilidad. Es la propiedad que se utiliza para aplicar longitudes flexibles en artículos flexibles. Esta flexibilidad está relacionada con la expansión y la reducción de la flexión. En este artículo, veremos la propiedad Flex Shrink para ver la extensión de que un Flex se puede reducir en comparación con los otros elementos en los contenedores.
La implementación de la propiedad Flex Shrink implica códigos HTML y CSS. Las herramientas básicas que son esenciales para la implementación de los códigos son: un editor de texto en el que escribimos las etiquetas HTML y CSS, y un navegador que se utiliza para ejecutar el archivo de texto y se muestra una página web. Primero, entenderemos la creación flexible usando HTML y CSS. Aquí se utilizan dos enfoques básicos de CSS: en línea o escritos dentro de las etiquetas HTML y el CSS interno que se declara dentro de la parte de la cabeza de la etiqueta de estilo CSS. Se puede acceder creando identificaciones y clases que se mencionan en el momento de la creación de contenido. Del mismo modo, la sintaxis que se da a continuación se escribe dentro de la etiqueta de estilo de la sección principal en el código HTML.
Sintaxis de la propiedad Flex Shrink:
Flex-shrink: valor (número);
El 'número' es el valor que se agrega a la propiedad para determinar cómo el elemento se reducirá en comparación con otros elementos. 1 es el valor predeterminado de esta propiedad. Esto significa que mediante el uso de 1, el retráctil al flex será cero.
Creación flexible:
Las etiquetas HTML son responsables de desarrollar el contenido de la página web. En el cuerpo, crearemos una caja flexible que se diseñará a través de CSS. Primero, hemos cambiado el color predeterminado de fondo a un efecto opcional. Se declara un encabezado simple. Se crea un div para contener el contenido dentro de él. Dentro del div, hay un presente más Div que lo convierte en un Div anidado. Todos estos adentro declarados Div se diseñan a través de un estilo en línea que tiene la propiedad de color de fondo para agregar colores a la flexión. Además, también hemos utilizado alfabetos simples como texto para nombrar cada bloque flexible. El Div exterior está acompañado por la clase CSS. Esta clase se declara en el CSS y tendrá algunas propiedades que se aplicarán al DIV, lo que lo convierte en un FlexBox.
Código de carrocería HTML:
Todo el Div dentro del Div exterior creará contenedores separados conocidos como Flex. Cada uno tendrá un color diferente. Todo este código funcionará utilizando CSS, ya que hasta ahora en el HTML, no hemos proporcionado ninguna alineación o dimensión al FlexBox o los bloques internos también. Consideremos primero la hoja de estilo.
Dentro de la etiqueta de estilo, ahora explicaremos todas las ID que se declararon dentro de las etiquetas de los contenidos HTML. Como la etiqueta de 'contenido' se declara en la divitiva divir. El ancho se da con un valor de visualización que es flexible. Esto formará un bloque conocido como FlexBox. Ahora, peinaremos los bloques internos. El nombre de la identificación seguirá al Div interno. El Div interno contendrá una propiedad base. Esta base flex es la distancia o el área de una sola flexión dentro de la caja. Se aplica un borde a cada caja con un color dado en el código.
#content div
Básis Flex: 240px;
borde: 3px sólido RGBA (0,0,0,.1);
Cada Flex tendrá un área de 240 píxeles. Después de esa etiqueta de estilo, cierre todas las etiquetas, incluida la etiqueta de la cabeza.
Código CSS HTML:
Guarde el código en el archivo del editor de texto con la extensión HTML y después de eso ejecute el archivo en el navegador. Verá que una página web estática se forma con pequeñas flexiones formadas con diferentes colores y alfabetos.
Producción:
Esto se hace principalmente utilizando las dimensiones de ancho al exterior y los bloques DIV internos para ajustarse. De esta manera, se crea una flexión simple.
Ahora, veremos cómo se encogerá un solo bloque del Flex.
Flex Shrink:
La parte del cuerpo HTML para el encogimiento flexible será el mismo, ya que el número de bloques DIV en el flexbox es el mismo con el mismo efecto de color y el texto que se le agrega. Mientras que la propiedad de estilo CSS tendrá una relación diferente para cada área flexible. En el cuerpo HTML, cada div interno que causa una flexión se asigna a una clase. Cada nombre de clase tiene su efecto de propiedad que se aplica al Div interno.
En la porción de la cabeza, dentro de la etiqueta de estilo, cada clase tendrá una descripción de los efectos que se aplican para causar el encogimiento flexible.
Código de carrocería HTML:
Los detalles que están presentes bajo la identificación del contenido y los contenidos div serán los mismos que hemos explicado anteriormente en la creación flexible. El Flexbox recibirá un ancho apropiado y el área flexible también se administra en píxeles que le aplican un borde con el mismo color del flex.
Código CSS HTML:
Alguna información adicional que se agrega para causar el encogimiento flexible es la explicación de la clase. Cada clase contiene un valor Flex-Shrink. El primer bloque o flex tiene 1 valor, el segundo tiene 2, y el tercer y cuarto flexión tienen estos valores correspondientemente.
.Box0
Flex-Shrink: 1;
La primera caja tiene un tamaño aproximadamente más cerca del tamaño original del flex. Hemos usado '1' al valor que causa el tamaño del flex sin ningún cambio. Notarás que el tamaño se encogerá de 1 ° a 4to flexión. El último 4 es el más pequeño del 3.
Guarde el código con el cambio. Luego, ejecute para ver los cambios en el navegador web. Verá que a medida que el flex del lado izquierdo a la derecha, el flex en general se encoge.
Producción:
Conclusión
El artículo de CSS Flex Shrink se escribe para describir la propiedad de retiro CSS que se aplica al Flex. Esta propiedad se utiliza para reducir la flexión dentro del FlexBox al aumentar el valor de la propiedad Flex en los números. Por defecto, 1 es el número que se utiliza para mantener el flexión sin ningún cambio. A medida que aumenta el número, la contracción del flex también aumenta. Primero, en el artículo, dimos una visión general de las dependencias HTML y CSS entre sí. Después de eso, explicamos la creación de una caja flexible simple que tiene cuatro flexiones dentro de él. En ese momento, no aplicamos ninguna propiedad flexible. Pero luego, en el mismo código, agregamos un estilo interno para agregar la propiedad Flex-Shrink a cada flexión del bloque.