max-block-size
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.
La propiedad max-block-size
CSS especifica el tamaño máximo de un elemento en la dirección opuesta a la escritura dirigida como se especifica por writing-mode
. Es decir, si la dirección de escritura es horizontal, entonces max-block-size
es equivalente a max-height
; si la dirección de escritura es vertical, max-block-size
es el mismo que max-width
.
El tamaño máximo de la otra dimensión se especifica usando la propiedad max-inline-size
.
Esto es útil porque max-width
se usa siempre para tamaños horizontales y max-height
para tamaños verticales, y si necesita establecer longitudes basadas en el tamaño de su contenido de texto, debe ser capaz de hacerlo con la dirección de escritura en cuenta.
En los momentos que normalmente utilizaría max-height
o max-width
, debería usar max-block-size
para establecer el "alto" máximo del contenido (incluso si esto no es un valor vertical) y max-inline-size
para establecer el "ancho" máximo del contenido (aunque esto puede ser vertical en lugar de horizontal). Vea el Ejemplo, que muestra los diferentes modos de escritura en acción.
Pruébalo
Sintaxis
/* Valores de longitud <length> */
max-block-size: 300px;
max-block-size: 25em;
/* Valores de porcentaje <percent> */
max-block-size: 75%;
/* Valores de palabras clave */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content(20em);
/* Valores globales */
max-block-size: inherit;
max-block-size: initial;
max-block-size: revert;
max-block-size: revert-layer;
max-block-size: unset;
Valores
El valor de la propiedad max-block-size
puede ser cualquier valor que sea legal para las propiedades max-width
y max-height
:
<length>
-
Define
max-block-size
como un valor absoluto. <percentage>
-
Define
max-block-size
como un porcentaje del tamaño del contenedor en el eje de bloque. none
-
Sin límite en el tamaño del elemento.
max-content
-
El preferido intrínseco para
max-block-size
. min-content
-
El mínimo intrínseco para
max-block-size
. fit-content(
<length-percentage>
)-
Usa la fórmula
fit-content
con el espacio disponible reemplazado por el argumento especificado, es decir,min(max-content, max(min-content, argument))
.
Cómo afecta el writing-mode a la direccionalidad
Los valores de writing-mode
afectan al mapeo de max-block-size
a max-width
o max-height
como a continuación:
Valores de writing-mode |
max-block-size es equivalente a |
---|---|
horizontal-tb , lr
Obsoleto
, lr-tb
Obsoleto
, rl
Obsoleto
, rb
Obsoleto
, rb-rl
Obsoleto
|
max-height |
vertical-rl , vertical-lr , sideways-rl
Experimental
, sideways-lr
Experimental
, tb
Obsoleto
, tb-rl
Obsoleto
|
max-width |
Nota: Los valores de writing-mode
: sideways-lr
y sideways-rl
, fueron eliminados de la especificación de escritura de nivel 3 de CSS en el proceso de diseño de sucesión. Pueden ser restaurados en el nivel 4.
Definición formal
Valor inicial | none |
---|---|
Applies to | same as width and height |
Heredable | no |
Percentages | block-size of containing block |
Valor calculado | same as max-width and max-height |
Animation type | a length, percentage or calc(); |
Sintaxis formal
max-block-size =
<'max-width'>
<max-width> =
none |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<intrinsic-size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-element> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
Ejemplos
Configuración de max-block-size con texto horizontal y vertical
En este ejemplo, el mismo texto (las oraciones de apertura de Herman Melville's en la novela Moby-Dick) se presenta en ambos modos de escritura horizontal-tb
y vertical-rl
.
HTML
El HTML establece dos bloques <div>
que se presentarán con su writing-mode
establecido usando las clases horizontal
o vertical
. Ambos cuadros comparten la clase standard-box
, que establece el color, el relleno y sus respectivos valores de max-block-size
.
<p>Modo de escritura <code>horizontal-tb</code> (el valor predeterminado):</p>
<div class="standard-box horizontal">
Llámame Ishmael. Hace algunos años, no importa cuántos años exactamente, sin
dinero en mi bolsillo ni nada de interés particular, Pensé en navegar un poco
y ver la parte acuosa del mundo. Eso es una forma que tengo de expulsar el
bazo y regular la circulación.
</div>
<p>Modo de escritura <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
Llámame Ishmael. Hace algunos años, no importa cuántos años exactamente, sin
dinero en mi bolsillo ni nada de interés particular, Pensé en navegar un poco
y ver la parte acuosa del mundo. Eso es una forma que tengo de expulsar el
bazo y regular la circulación.
</div>
CSS
El CSS define tres clases. La primera, standard-box
, se aplica a ambos cuadros, como se ve arriba. Establece estilos estándar incluyendo el tamaño mínimo y máximo del bloque, el tamaño de la fuente, y así sucesivamente.
Después de eso vienen las clases horizontal
y vertical
, que añaden la propiedad writing-mode
al cuadro, con el valor horizontal-tb
o vertical-rl
dependiendo de qué clase se utiliza.
.standard-box {
padding: 4px;
background-color: #abcdef;
color: #000;
font:
16px "Open Sans",
"Helvetica",
"Arial",
sans-serif;
max-block-size: 160px;
min-block-size: 100px;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}
Resultado
Especificaciones
Specification |
---|
CSS Logical Properties and Values Level 1 # propdef-max-block-size |
CSS Box Sizing Module Level 4 # sizing-values |
Compatibilidad con navegadores
BCD tables only load in the browser
Véase también
- Las propiedades físicas mapeadas:
max-width
ymax-height
- Establecer el tamaño máximo de la otra dirección:
max-inline-size
writing-mode