CSS - Propiedad max-block-size: Una Guía Amigable para Principiantes

¡Hola a todos, futuros magos del CSS! Hoy vamos a emprender un viaje emocionante en el mundo del CSS, explorando específicamente la propiedad max-block-size. No te preocupes si eres nuevo en esto; seré tu guía amigable, y abordaremos este tema paso a paso. Así que, toma tu bebida favorita, cómodate y ¡vamos a sumergirnos en esto!

¿Qué es max-block-size?

Antes de sumergirnos en los detalles, entendamos de qué se trata la propiedad max-block-size. Imagina que estás construyendo una torre con bloques. La propiedad max-block-size es como establecer un límite en cuán alta puede ser tu torre. En términos de CSS, define el tamaño máximo de un elemento en la dirección del bloque.

"Pero espera," podrías preguntar, "¿qué es la dirección del bloque?" ¡Gran pregunta! La dirección del bloque es típicamente la dirección vertical en idiomas escritos horizontalmente (como el inglés), y la dirección horizontal en idiomas escritos verticalmente (como el japonés tradicional).

Sintaxis y Valores Posibles

Veamos cómo podemos usar max-block-size en nuestro CSS:

.mi-elemento {
max-block-size: valor;
}

¿Qué podemos poner en lugar de "valor"? Aquí tienes una tabla útil con todos los valores posibles:

Valor	Descripción
<longitud>	Una longitud fija, como 300px o 20em
<porcentaje>	Un porcentaje del tamaño del bloque contenedor
ninguno	Sin límite (este es el valor predeterminado)
max-content	El tamaño máximo preferido intrínseco
min-content	El tamaño mínimo intrínseco
fit-content	Similar a auto, pero con algunas diferencias
auto	El navegador decide el tamaño máximo

Aplicabilidad

No todas las propiedades de CSS se aplican a todos los elementos HTML. La propiedad max-block-size se aplica a todos los elementos excepto:

• Elementos en línea no reemplazados
• Filas de tabla
• Grupos de filas

No te preocupes si aún no estás familiarizado con estos términos. A medida que avanzas en tu viaje con CSS, los encontrarás y entenderás por qué son excepciones.

Efectos de max-block-size con writing-mode

¡Ahora, donde las cosas se ponen interesantes! La propiedad max-block-size cambia su comportamiento según el writing-mode del texto. Vamos a ver algunos ejemplos:

Ejemplo 1: Modo de Escritura Horizontal

.caja {
writing-mode: horizontal-tb;
max-block-size: 200px;
background-color: lightblue;
padding: 10px;
}

<div class="caja">
Esta es una caja con modo de escritura horizontal y max-block-size establecido en 200px.
</div>

En este ejemplo, max-block-size limitará la altura de la caja a 200 píxeles porque la dirección del bloque es vertical en el modo de escritura horizontal.

Ejemplo 2: Modo de Escritura Vertical

.caja {
writing-mode: vertical-rl;
max-block-size: 200px;
background-color: lightgreen;
padding: 10px;
}

<div class="caja">
Esta es una caja con modo de escritura vertical y max-block-size establecido en 200px.
</div>

En este caso, max-block-size limitará el ancho de la caja a 200 píxeles porque la dirección del bloque es horizontal en el modo de escritura vertical.

max-block-size con Valor <longitud>

Cuando usamos un valor de longitud, estamos estableciendo un tamaño máximo fijo. Vamos a verlo en acción:

.tamano-fijo {
max-block-size: 150px;
background-color: lightyellow;
padding: 10px;
}

<div class="tamano-fijo">
Esta caja tiene un max-block-size de 150px. Si el contenido excede esta altura, se desbordará.
</div>

En este ejemplo, sin importar cuánto contenido pongamos en el div, no crecerá más de 150 píxeles de altura.

max-block-size con Valor <porcentaje>

Los porcentajes son relativos al tamaño del bloque contenedor. Así es como funciona:

.padre {
height: 300px;
background-color: lightgray;
}

.hijo {
max-block-size: 50%;
background-color: lightpink;
padding: 10px;
}

<div class="padre">
<div class="hijo">
Este div hijo tiene un max-block-size del 50% del altura de su padre.
</div>
</div>

En este caso, el div hijo nunca será más alto que la mitad de la altura de su padre.

max-block-size con Valor <max-content>

El valor max-content es particularmente útil cuando quieres que tu elemento sea tan grande como lo requiera su contenido, pero no más grande. Vamos a ver un ejemplo:

.caja-max-contenido {
max-block-size: max-content;
background-color: lightcoral;
padding: 10px;
}

<div class="caja-max-contenido">
Esta caja se expandirá para adaptarse a su contenido, pero no más que eso.
</div>

Esta caja crecerá para accommodate su contenido, pero no se extenderá más allá de eso.

max-block-size con Texto Horizontal y Vertical

Vamos a finalizar con un ejemplo que combina texto horizontal y vertical:

.texto-mezclado {
max-block-size: 200px;
background-color: lavender;
padding: 10px;
}

.texto-vertical {
writing-mode: vertical-rl;
max-block-size: 100px;
background-color: lightsalmon;
margin-top: 10px;
}

<div class="texto-mezclado">
Este es texto horizontal con max-block-size de 200px.
<div class="texto-vertical">
Este es texto vertical con max-block-size de 100px.
</div>
</div>

En este ejemplo, tenemos un contenedor con texto horizontal y una altura máxima de 200px. Dentro de él, tenemos otro div con texto vertical y un ancho máximo de 100px.

¡Y ahí lo tienes! Hemos explorado la propiedad max-block-size desde varios ángulos. Recuerda, la clave para dominar CSS es la práctica. Así que, no tengas miedo de experimentar con estos ejemplos, modifícalos y observa qué pasa. ¡Feliz codificación, y que tus bloques siempre sean del tamaño perfecto!

Credits: Image by storyset