Propriedade max-inline-size do CSS

Definição e uso

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

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

Se o tamanho do conteúdo for maior que o tamanho máximo na direção inline, será aplicado max-inline-size valor da propriedade.

Nota:propriedades CSS relacionadas writing-mode Define a direção inline, o que afeta max-inline-size o resultado da propriedade. Para páginas em inglês, a direção de bloco é para baixo e a direção inline é de esquerda para direita.

CSS max-inline-size propriedade e propriedade CSS max-height e max-width Muito semelhante, mas max-inline-size A propriedade depende da direção inline.

Instância

Exemplo

Exemplo 1

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

Experimente você mesmo

Exemplo 2: Modo de escrita

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

div {
  max-inline-size: 60px;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Exemplo 3: Max-inline-size vs Inline-size

Observar um elemento <div> (inline-size para 100px) e outro elemento <div> (max-inline-size Reações diferentes ao alterar o tamanho do conteúdo para 100px):

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

Experimente você mesmo

Sintaxe do CSS

max-inline-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 completamente essa propriedade pela primeira vez.

Páginas relacionadas

Referência:Atributo CSS inline-size

Referência:Propriedade min-inline-size do CSS

Referência:Propriedade max-height do CSS

Referência:Propriedade max-width do CSS

Referência:A propriedade CSS writing-mode