Dimensionamiento para propiedades lógicas

La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura horizontal-tb, como Inglés o Árabe, en cada caso el ancho (width) sería asignado a inline-size.

Si tú estás en un modo de escritura vertical, entonces inline-size sería asignado a height.

Propiedades Lógicas	Propiedades Físicas
inline-size	width
block-size	height
min-inline-size	min-width
min-block-size	min-height
max-inline-size	max-width
max-block-size	max-height

Las asignaciones para el ancho (width) y el alto (height) son inline-size, que establece el largo en la dimensión en línea y block-size, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (width) con inline-size y el alto (height) con block-size dará el mismo diseño.

En el siguiente ejemplo, establecemos un modo de escritura horizontal-tb. Cambiamos esto por vertical-rl y veremos que el primer ejemplo — cuando usamos width y height — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos inline-size y block-size — seguirá la dirección del texto como si todo el bloque hubiera girado.

También hay asignaciones para min-width y min-height — estas son min-inline-size y min-block-size. Estas funcionan de la misma manera que las propiedades de inline-size y block-size, pero establecen un tamaño mínimo en lugar de uno fijo.

Intente cambiar el siguiente ejemplo a vertical-rl, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando min-height en el primer ejemplo y min-block-size en el segundo.

Finalmente, puedes usar max-inline-size y max-block-size como reemplazos de max-width y max-height. Intenta jugar con el siguiente ejemplo de la misma manera que antes.

La propiedad resize establece si un elemento se puede redimensionar o no y si tiene valores físicos de horizontal y vertical. La propiedad resize también tiene valores de palabras clave lógicas. Usar resize: inline permite cambiar el tamaño en la dimensión inline y resize: block permite cambiar el tamaño en la dimensión de bloque.

El valor de la palabra clave de both para la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.