Dimensionamiento para propiedades lógicas
=========================================

En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.

Cuando especificamos el tamaño de un ítem, las Propiedades y Valores Lógicos te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.

Asignaciones para dimensiones
-----------------------------

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` (en-US) |
| `max-block-size` | `max-height` |

Ejemplo de ancho y alto
-----------------------

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.

Ejemplo de ancho y alto mínimo
------------------------------

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.

Ejemplo de ancho y alto máximo
------------------------------

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

Palabras claves para redimensionamiento lógico
----------------------------------------------

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.

**Advertencia:** **Nota:** Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.