tamaño máximo en línea

max-inline-sizees una propiedad lógica en CSS que define el ancho máximo de un elemento cuando writing-modees horizontal, o la altura máxima del elemento cuando writing-modees vertical.

.element {  max-inline-size: 500px;  writing-mode: vertical-lr;} 

Como habrás adivinado con el ejemplo anterior, la writing-modepropiedad cambia la orientación del texto y el flujo del diseño en 90 grados.

La razón principal para cambiar la orientación, además de crear diseños preferidos, es dar cabida a la internacionalización en un sitio. Muchas escrituras de Asia oriental, como la china, la japonesa y la coreana, se pueden escribir horizontal o verticalmente. Utilizando propiedades lógicas, podemos proporcionar la dirección de tamaño correcta de los elementos según el modo de escritura del usuario.

Jen Simmons tiene un artículo y una presentación que profundizan en los modos de escritura CSS.

¿No podemos simplemente usar la max-widthpropiedad?

¡Si! Pero si no eres compatible con Internet Explorer, no hay motivo para no utilizarlo max-inline-size. max-widthes una dimensión física, por lo que cuando cambia el modo de escritura, un elemento mantiene su tamaño de ancho horizontal, rompiendo un diseño cuando está configurado para ser vertical. Las propiedades lógicas, como max-inline-size, pueden responder a cambios esos y aplicar el tamaño en la orientación adecuada.

Sintaxis

max-inline-size: 'width';

• Inicial: auto
• Se aplica a: igual que heightywidth
• heredado: no
• Porcentajes: como para la propiedad física correspondiente
• Valor calculado: igual que heightywidth
• Tipo de animación: por tipo de valor calculado

Valores

/* Length values */max-inline-size: 250px;max-inline-size: 5rem;
/* Percentage values */max-inline-size: 75%;
/* Keyword values */max-inline-size: auto;max-inline-size: fit-content(5rem);max-inline-size: max-content;max-inline-size: min-content;
/* Global values */max-inline-size: inherit;max-inline-size: initial;max-inline-size: unset;

Manifestación

Cuando writing-modeesté configurado en vertical-rl, el contenido rotará y cambiará el diseño. El ancho del max-widthcuadro rotará con el contenido. ¡Pero max-inline-sizees inteligente! Deja su ancho intacto, independientemente del writing-modevalor. Cambie writing-modeen la siguiente demostración para ver la diferencia entre los dos.

Soporte del navegador

ES DECIR	Borde	Firefox	cromo	Safari	Ópera
No	79+	41+	57	12.1+	44+

androidcromo	Android Firefox	Navegador de Android	Safari en iOS	Ópera móvil
85+	79+	81+	12.2+	59+

Tenga en cuenta que la compatibilidad con el uso de las siguientes funciones puede diferir de la compatibilidad con la propiedad:

• fit-content()
• max-content()
• min-content()

Más información

Propiedades lógicas CSS

Chris Coyier

Reglas horizontales bidireccionales en CSS

Chris Coyier

Creación de diseños multidireccionales.

Ahmad El-Alfy

Propiedades relacionadas

tamaño en línea

.element { inline-size: 700px; } Andrés Galante

modo de escritura

.element { writing-mode: vertical-rl; } Robin Rendle