Ahmad Shadeed: Casos de uso de CSS fit-content | consejos CSS

Ahmad Shadeed cubre CSS fit-content palabra clave de tamaño. ¡Es útil! simplemente no viene Genial frecuentemente. me encuentro usando min-content mucho más, como al establecer la altura de un grid-template-row.

los fit-content palabra clave en realidad está estrechamente relacionada con min-content y max-content - solo tiene una pequeña heurística que Ahmad ilustra bien en forma de diagrama de flujo.

Transmisión de chat de Ahmad Shadeed que ilustra cómo los navegadores manejan la palabra clave CSS de contenido adecuado.
"Casos de uso para contenido de ajuste CSS" por Ahmad Shadeed

Aquí se trata mi caso de uso favorito: dimensionar un <figure> con fit-contentpara que se envuelva perfectamente alrededor del <img>. De esta manera, incluso si la imagen no llena el espacio principal, puede permanecer en el nivel de bloque.

También cubrimos la inmersión profunda de PPK en fit-content el año pasado. Uno de los elementos clave para entenderlo es saber que es esencialmente un guión abreviado:

.box {
  width: fit-content;

  /* ... is the same as ... */
  width: auto;
  min-width: min-content;
  max-width: max-content;
}

Enlace directo →

Si quieres conocer otros artículos parecidos a Ahmad Shadeed: Casos de uso de CSS fit-content | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas