Propriedade max-block-size do CSS

Definição e uso

max-block-size A propriedade especifica o tamanho máximo do elemento na direção do bloco.

Se o tamanho do conteúdo for menor que o valor máximo, então max-block-size O valor da propriedade não funciona.

Se o tamanho do conteúdo for maior que o valor máximo, será aplicado max-block-size Valores da propriedade.

Atenção:propriedades CSS relacionadas writing-mode Define a direção do bloco, o que afeta max-block-size resultados das propriedades. Para páginas em inglês, a direção do bloco é downward e a direção inline é de esquerda para direita.

CSS max-block-size propriedades são equivalentes às propriedades do CSS max-height e max-width Muito semelhante, mas max-block-size A propriedade depende da direção do bloco.

Instância

Exemplo

Exemplo 1

div {
  max-block-size: 60px;
}

Experimente você mesmo

Exemplo 2: Modo de escrita

Defina o tamanho máximo do bloco do elemento <div> como 60 pixels: writing-mode Quando o valor da propriedade é vertical-lr, a direção do bloco muda de vertical para horizontal, o que afeta max-block-size Como a propriedade funciona:

div {
  max-block-size: 60px;
  writing-mode: vertical-lr;
}

Experimente você mesmo

Exemplo 3: Max-block-size vs Block-size

Observe um elemento <div> (block-size 100px) e outro elemento <div> (max-block-size Reações diferentes ao mudar o tamanho do conteúdo (100px):

#div1 {
  max-block-size: 100px;
}
#div2 {
  block-size: 100px;
}

Experimente você mesmo

Sintaxe do CSS

max-block-size: auto|length|initial|inherit;

Valor da propriedade

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente essa propriedade.

Páginas relacionadas

Referência：Atributo block-size do CSS

Referência：Propriedade min-block-size do CSS

Referência：Propriedade max-height do CSS

Referência：Propriedade max-width do CSS

Referência：Atributo writing-mode do CSS