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

¡Hola a todos, futuros magos del CSS! Hoy vamos a sumergirnos en el emocionante mundo de la propiedad max-inline-size. No te preocupes si eres nuevo en esto; seré tu guía amigable a través de esta aventura de CSS. Así que, toma una taza de café (o té, si eso es lo tuyo), y ¡vamos a empezar!

¿Qué es max-inline-size?

Antes de sumergirnos en los detalles, entendamos un poco sobre lo que es max-inline-size. Imagina que estás tratando de ajustar una palabra muy larga en una caja pequeña. Eso es un poco lo que max-inline-size nos ayuda a hacer en CSS. Establece el tamaño máximo de un elemento en la dirección inline.

"Pero espera," podrías preguntar, "¿qué es la dirección inline?" ¡Gran pregunta! En inglés y muchos otros idiomas, la dirección inline es horizontal, desde la izquierda hacia la derecha. Sin embargo, en algunos idiomas como el árabe o el hebreo, es desde la derecha hacia la izquierda. Y en modos de escritura vertical, ¡incluso puede ser de arriba hacia abajo!

Valores Posibles

Ahora, veamos los diferentes valores que podemos usar con max-inline-size. Aquí tienes una tabla práctica:

Valor	Descripción
<longitud>	Una longitud fija como 300px o 20em
<porcentaje>	Un porcentaje del tamaño del bloque contenedor
none	Sin límite en el tamaño (esto es el valor predeterminado)
max-content	El tamaño preferido intrínseco
min-content	El tamaño mínimo intrínseco
fit-content	Usa el espacio disponible, pero nunca menos que min-content y nunca más que max-content

No te preocupes si algunos de estos parecen confundirte ahora. Exploraremos cada uno con ejemplos.

Aplicabilidad

La propiedad max-inline-size se aplica a todos los elementos excepto:

• Elementos inline no reemplazados
• Filas de tabla
• Grupos de filas

Sintaxis

La sintaxis básica para max-inline-size es bastante sencilla:

max-inline-size: valor;

Fácil, ¿verdad? Ahora, ¡diveamos en algunos ejemplos específicos!

CSS max-inline-size - Valor <longitud>

Comencemos con un ejemplo simple usando una longitud fija:

.box {
max-inline-size: 300px;
background-color: lightblue;
padding: 10px;
}

<div class="box">
Esta es una caja con max-inline-size establecida en 300px. El contenido se ajustará si supera este ancho.
</div>

En este ejemplo, hemos establecido max-inline-size en 300 píxeles. Esto significa que sin importar cuánto contenido pongamos dentro de la .box, nunca se extenderá más allá de 300px en la dirección inline (que es horizontal en este caso). Si el contenido es demasiado largo, se ajustará a la siguiente línea.

CSS max-inline-size - Valor <porcentaje>

Ahora, probemos usar un valor de porcentaje:

.container {
width: 500px;
border: 2px solid black;
}

.box {
max-inline-size: 50%;
background-color: lightgreen;
padding: 10px;
}

<div class="container">
<div class="box">
Esta caja tiene max-inline-size establecida en 50% del ancho de su contenedor.
</div>
</div>

En este caso, la .box tendrá un tamaño máximo inline del 50% del ancho de su contenedor. Así que, si el contenedor tiene 500px de ancho, la caja nunca excederá los 250px en ancho.

CSS max-inline-size - Valor <max-content>

El valor max-content es particularmente interesante. Establece el tamaño máximo inline al tamaño preferido del contenido. Vamos a verlo en acción:

.box {
max-inline-size: max-content;
background-color: lightyellow;
padding: 10px;
}

<div class="box">
Esta caja se expandirá para ajustar su contenido, pero no se ajustará a menos que se vea obligada a hacerlo.
</div>

Con max-content, la caja se expandirá para ajustar todo su contenido en una línea, solo ajustándose si se ve obligada a hacerlo (como si alcanza el borde del viewport).

CSS max-inline-size - Con Texto Vertical

¡Ahora, algo un poco diferente! Vamos a ver cómo max-inline-size funciona con texto vertical:

.vertical-box {
writing-mode: vertical-rl;
max-inline-size: 100px;
background-color: lightpink;
padding: 10px;
}

<div class="vertical-box">
Este texto es vertical, ¡y max-inline-size limita su altura!
</div>

En este ejemplo, hemos usado writing-mode: vertical-rl para hacer el texto vertical y de derecha a izquierda. Ahora, max-inline-size realmente limita la altura de la caja, porque en el modo de escritura vertical, la dirección inline es vertical.

Conclusión

Y aquí lo tienes, amigos. Hemos explorado la propiedad max-inline-size de principio a fin (o debería decir, desde el principio hasta el final de la dirección inline). Recuerda, CSS es todo sobre experimentación. No tengas miedo de jugar con estas propiedades y ver qué pasa. Así es como todos aprendimos.

Antes de dejarte, aquí tienes un chiste para recordar max-inline-size por siempre: ¿Por qué fue al gimnasio la propiedad de CSS? ¡Para trabajar en su max-inline-size, por supuesto!

¡Feliz codificación, y que tus diseños siempre sean flexibles y tu contenido siempre ajuste bien!

Credits: Image by storyset