Flexión-encogimiento - Trucos CSS

Tabla de contenido

La flex-shrinkpropiedad es una subpropiedad del módulo Diseño de caja flexible.

Especifica el "factor de encogimiento flexible", que determina cuánto se encogerá el elemento flexible en relación con el resto de los elementos flexibles en el contenedor flexible cuando no hay suficiente espacio en la fila.

Cuando se omite, se establece en 1y el factor de contracción de flexión se multiplica por la base de flexión cuando se distribuye el espacio negativo.

Sintaxis

flex-shrink: .flex-item ( flex-shrink: 2; )

Manifestación

Para ver todo el potencial de esta demostración, tendría que poder cambiar el tamaño de su ancho, así que échele un vistazo en CodePen directamente.

¡Mira este bolígrafo!

En esta demostración:

  • El primer elemento tiene flex: 1 1 20em(abreviatura de flex-grow: 1, flex-shrink: 1, flex-basis: 20em)
  • El segundo elemento tiene flex: 2 2 20em(abreviatura de flex-grow: 2, flex-shrink: 2, flex-basis: 20em)

Ambos elementos flexibles deben tener un ancho de 20 em. Debido al flex-grow (primer parámetro), si el contenedor flexible es mayor que 40em, el segundo niño ocupará el doble de espacio sobrante que el primer niño. Pero si el elemento padre tiene menos de 40em de ancho, entonces el segundo hijo tendrá el doble de afeitado que el primer hijo, lo que lo hará parecer más pequeño (debido al segundo parámetro, flex-shrink).

Soporte del navegador

  • (moderno) significa la sintaxis reciente de la especificación (p display: flex;. ej. )
  • (híbrido) significa una sintaxis no oficial extraña de 2011 (p display: flexbox;. ej. )
  • (antiguo) significa la sintaxis antigua de 2009 (p display: box;. ej. )
Cromo Safari Firefox Ópera ES DECIR Androide iOS
21+ (moderno)
20- (antiguo)		 3.1+ (antiguo) 2-21 (antiguo)
22+ (nuevo)		 12.1+ (moderno) 10+ (híbrido) 2.1+ (antiguo) 3.2+ (antiguo)

El navegador Blackberry 10+ admite la nueva sintaxis.

Para obtener más información sobre cómo mezclar sintaxis para obtener la mejor compatibilidad con el navegador, consulte este artículo (Trucos CSS) o este artículo (DevOpera).

Articulos interesantes...