Get best of the week

Tudo sobre a palavra-chave automática em CSS

CSS possui uma palavra-chave autoque você pode usar ao trabalhar com várias propriedades de elementos. Essas são propriedades que afetam a posição, altura e largura dos elementos. Essas são propriedades projetadas para ajustar o recuo dos elementos e suas outras características. Eu tinha um desejo em algum lugar para gravar tudo o que sei auto. Por exemplo, para organizar tudo isso na forma de material que possa se tornar uma referência para aqueles que estão interessados ​​nos meandros do uso dessa palavra-chave.

A palavra auto- chave tem um significado especial quando usada com várias propriedades CSS. Analisaremos os recursos autorelacionados à aplicação desse valor a várias propriedades. Aqui, em primeiro lugar, estaremos interessados ​​nos detalhes técnicos do trabalho.



auto. Também falaremos sobre como tirar o máximo proveito do uso dessa propriedade. Aqui você encontrará notas sobre autocasos de uso e exemplos.

Propriedade Width: auto


A largura inicial dos elementos do bloco, como <div>ou <p>, é o valor auto. Isso leva ao fato de que esses elementos ocupam todo o espaço horizontal do bloco que os contém.

“Largura do bloco que contém o elemento” é, de acordo com a especificação CSS, um valor calculado pela seguinte fórmula:

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’

Quando a largura do elemento de valor especificado auto, ele pode ser configurado tais propriedades como margin, padding, bordere é, portanto, não será maior do que o seu elemento pai. A largura do bloco que restringe o conteúdo do elemento do bloco será o tamanho do conteúdo menos a largura de suas partes definidas pelas propriedades margin(campo, recuo externo), padding(recuo interno) e border(borda).


Comparação de largura: automática e largura: 100%

Considere, por exemplo, os recursos do dispositivo dos layouts acima.

Aqui está a marcação HTML:

<div class="wrapper">
  <div class="item"></div>
</div>

Aqui está o CSS:

* {
    box-sizing: border-box;
}

.wrapper {
      max-width: 600px;
      margin: 2rem auto 0;
      padding: 1rem;
}

.item {
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

Aqui tudo parece como deveria, o conteúdo é limitado ao elemento pai.


O elemento está dentro do elemento pai

E o que acontece se você especificar que a largura do elemento (width) não deve ser especificada como um valorauto, mas como100%? Com essa abordagem, o elemento ocupará 100% da largura do elemento pai, ao qual o espaço alocado nas margens direita e esquerda será adicionado. Aqui está o estilo apropriado:

.item {
      width: 100%;
      padding: 1rem;
      margin: 0 50px;
      border: 15px solid #1f2e17;
}

Mas o que acontece depois de aplicá-lo a um elemento.


O elemento se estende além do elemento pai (a direção do texto é ltr) e

o elemento é amplo568px . É calculado da seguinte forma:

‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ = 15 + 16 + 506 + 16 + 15 = 568px

Se a propriedade estiver directionconfigurada para um valor ltr, o valor margin-rightserá completamente ignorado. No nosso caso, é exatamente isso que acontece. No entanto, se directiongravado rtl, será ignorado margin-left.


O elemento vai além do elemento pai (a direção do texto é rtl).

Aqui você pode experimentar o código de exemplo.

▍ Casos de uso para largura: auto


A fim de entender corretamente o significado auto, não há história suficiente sobre o básico. Portanto, realizei uma pesquisa com o objetivo de mostrar cenários para o uso prático da propriedade width: auto.

Larguras diferentes de elementos nas versões para celular e computador da página



Opções de aplicativos para dispositivos móveis e computadores

Há um grupo de botões. É necessário que na versão móvel do aplicativo eles estejam localizados próximos um do outro (um elemento que contém um botão deve ocupar 50% do elemento pai). Na versão da área de trabalho do aplicativo, cada botão deve ocupar toda a largura do contêiner pai. Como fazer isso?

Aqui está a marcação HTML:

<div class="group">
    <div class="group__item">
        <button class="c-button">Sign In</button>
    </div>
    <div class="group__item">
        <button class="c-button c-button--ghost">Register</button>
    </div>
</div>

Para colocar botões próximos uns dos outros na versão móvel da página, usei o layout do flexbox. Aqui está o CSS relevante:

.group {
    display: flex;
}

.group__item {
    width: 50%;
}

Na versão desktop, preciso dos botões para ocupar toda a largura do elemento pai. Pode haver uma tentação de usar o design width: 100%. Verdade? Mas há uma solução melhor:

@media (min-width: 800px) {
    /*    flexbox-    */
    .group {
        display: block;
    }

    .group__item {
        width: auto;
    }
}

Como .group__itemesse é um elemento de bloco, o uso width: autoleva ao fato de que esse elemento preenche perfeitamente o espaço disponível em seu elemento pai.

Aqui está uma versão funcional deste exemplo.

Propriedade Height: auto


Se considerarmos trabalhar com uma propriedade heightque define a altura dos elementos, tudo parecerá diferente. A altura do elemento, ao aplicar o valor auto, corresponde à altura do conteúdo do elemento.

Considere o seguinte exemplo:

<div class="wrapper">
  <div class="item">What's my height?</div>
</div>

Para que um elemento com uma classe .itemocupe toda a altura do contêiner, você pode usar um dos seguintes métodos:

  1. Você pode definir um elemento com uma classe como .wrapperaltura fixa e, em seguida, adicionar uma .itempropriedade ao estilo do elemento height: 100%.
  2. Você pode usar o .wrapperlayout da caixa flexível para o elemento , para que o filho .item, por padrão, seja estendido para o tamanho do elemento pai.

Aqui está o CSS:

.wrapper {
    height: 200px;
}

.item {
    height: 100%;
}


Elementos pai e filho

Campos e palavra-chave automática


Os campos (margens externas) costumam ser usados ​​para centralizar horizontalmente elementos cuja largura é conhecida.

Considere um exemplo.


O item a ser centralizado O

retângulo azul precisa ser centralizado horizontalmente. Para esse fim, você pode usar o seguinte estilo:

.element {
    margin-left: auto;
    margin-right: auto;
}

Voltando à especificação CSS:

Se as propriedades 'margin-left' e 'margin-right' estiverem definidas como 'auto', a largura das margens será a mesma. Isso leva ao alinhamento horizontal do elemento em relação às arestas do bloco, incluindo ele.


Os campos de um elemento têm a mesma largura.Aqui

está uma demonstração deste exemplo.

Uso da margem: propriedade automática para elementos absolutamente posicionados



Elemento centralizado

Outro cenário menos comum para aplicar um valorautoé centralizar elementos absolutamente posicionados usando uma construçãomargin: auto. Se houver um elemento que precise ser centralizado dentro do elemento pai na horizontal e na vertical, pode parecer que você precise usar a propriedadetranslateXoupara issotranslateY.

Para que a propriedademargin: autonos permita alinhar adequadamente o elemento, as seguintes condições devem ser atendidas:

  1. A largura e a altura do elemento são especificadas.
  2. A propriedade do elemento está configurada position: absolute.

Aqui está a marcação HTML:

<div class="wrapper">
  <div class="item">I am centered.</div>
</div>

Aqui está o código do estilo:

.wrapper {
    position: relative;
}

.item {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Aqui está uma demonstração dessa técnica de alinhamento.

Layouts Flexbox e personalização automática de campos


O uso de campos configurados automaticamente pode, em alguns casos, ser um truque muito útil. Se o elemento filho tiver um campo cujas dimensões são definidas usando o valor auto, ele será deslocado ao máximo no elemento pai para o lado oposto ao campo configurado. Por exemplo, se uma propriedade for atribuída a um elemento flexível margin-left: auto, ela será deslocada ao máximo para a direita.

Vamos olhar para o seguinte layout. Existem dois elementos filho retangulares localizados no elemento pai flexbox.


Um par de elementos em um contêiner flexbox

Precisamos que o elemento 2 seja movido para a borda direita do contêiner. Usar o valorautoda propriedade éótimopara issomargin-left:

.wrapper {
    display: flex;
}

.item-2 {
    margin-left: auto;
}

Aqui está o que aconteceu depois de aplicar esse estilo.


O elemento número 2 é movido para a borda direita do contêiner.

Note-se que essa técnica também funciona com os elementos sendo alinhados verticalmente. Neste exemplo, aplique o seguinte estilo do elemento # 2:

.item-2 {
    margin-top: auto;
}

Aqui está o resultado.


Elemento No. 2 é movido para a borda inferior do recipiente.

Além disso, se houver apenas um elemento filho, em seguida, de modo a alinhá-lo horizontalmente e verticalmente, pode utilizar a propriedademargin: auto. Suponha que no contêiner haja apenas o elemento número 1, que precisa ser alinhado exatamente assim. Para fazer isso, usamos o seguinte estilo:

.item-1 {
    margin: auto;
}

Isso é suficiente para centralizar o elemento.


Item nº 1 centrado no contêiner

Propriedade flexível e valor automático


Ao desenvolver layouts flexbox, você pode usar a propriedade para elementos filho flex: auto. O que esse design significa? O fato é que, quando um elemento filho tem uma propriedade flex: auto, isso é equivalente ao fato de o elemento receber um estilo flex: 1 1 autosemelhante à seguinte construção:

    .item {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }

Aqui está o que a MDN diz sobre isso : “As dimensões de um elemento são determinadas de acordo com suas propriedades widthe height, mas o elemento pode ser esticado, ocupando espaço livre adicional disponível no contêiner flex. Um elemento, para caber em um contêiner, pode e é compactado em seu tamanho mínimo. Isso é semelhante a definir estilo flex: 1 1 auto. ”

Em outras palavras, o tamanho do elemento com a propriedade flex: autoserá definido com base em sua largura e altura. Mas esse elemento pode esticar ou contrair, dependendo da quantidade de espaço disponível no contêiner. Eu não sabia disso até começar a pesquisar para este artigo.

Como sempre, considere um exemplo.

Aqui está a marcação:

<div class="wrapper">
  <div class="item item-1">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

Aqui estão os estilos:

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 120px;
    height: 500px;
}

.item-1 {
    flex: auto;
}

E aqui está o resultado.


Usando flex: auto

Aqui está uma versão funcional deste exemplo.

Layouts de grade e valor automático


Use automático para ajustar colunas



Usando as colunas de modelo de grade: estilo auto 1fr 1fr

Ao desenvolver layouts de grade, você pode usar o valorautoao configurar as colunas. Isso significa que a largura das colunas dependerá do tamanho do seu conteúdo. Aqui está o que eu quero dizer:

.wrapper {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
}

Layouts de grade e usando o valor automático para definir campos


Ao usar layouts de grade, o valor autopode ser usado para personalizar os campos do elemento. Isso é feito para obter resultados semelhantes aos alcançados quando usados autonos layouts do Flexbox. Se estivermos trabalhando com um layout de grade, e um dos elementos da grade tiver, por exemplo, um estilo margin-left: auto, ele será movido para o lado direito do layout e sua largura será selecionada com base no tamanho do seu conteúdo.

Considere o seguinte exemplo.


Layout da grade

Precisamos da largura de um elemento paraItem 1depender do seu conteúdo, e não do espaço da grade disponível para ele. Para fazer isso, podemos usar o seguinte estilo:

    .item-1 {
        margin-left: auto;
    }

Aqui está o resultado da aplicação desse estilo.


A largura de um elemento depende do seu conteúdo.

Layouts TRTL


Vale ressaltar que o uso de propriedades margin-left: autoou se margin-right: automostra bem para layouts LTR (para layouts em que o conteúdo está localizado da esquerda para a direita), por exemplo, para aqueles que são usados ​​para exibir textos escritos em inglês. Mas esteja ciente de que, em sites multilíngues, esses significados são invertidos. Ainda melhor, e eu recomendaria fazer exatamente isso, usando as propriedades Flexbox ou Grid em tais modelos, fazendo isso nos casos em que o objetivo possa ser alcançado com a ajuda deles. Se isso não for possível com a ajuda de tais propriedades, recorra à definição das propriedades da margem usando autoapenas como último recurso. Em vez disso, é melhor usar as propriedades lógicas do CSS .

Propriedade de estouro


Ao trabalhar com elementos de páginas da web, precisamos saber sobre o tamanho do conteúdo que esses elementos são capazes de conter. Se o conteúdo for maior do que o elemento pode conter, você precisará mostrar a barra de rolagem para trabalhar com esse conteúdo.

Para resolver esse problema, você pode tentar usar o seguinte estilo:

.element {
    overflow-y: scroll;
}

Mas com essa abordagem, uma barra de rolagem pode aparecer mesmo que o elemento exiba conteúdo cujo tamanho não exceda o tamanho do elemento. Aqui está um exemplo.


Elemento ao qual o estilo de rolagem overflow-y: está atribuído

No navegador Chrome na plataforma Windows, a barra de rolagem é sempre exibida. Este é um exemplo de um elemento que se comporta mal e pode confundir o usuário.

O uso em vez desse valorautopermite garantir que a barra de rolagem seja exibida apenas nos casos em que a altura do conteúdo exceda a altura do contêiner.

Oseguinte é indicadono MDN : “Depende do agente do usuário. Se o conteúdo for colocado na área do elemento correspondente ao espaço interno do elemento, será igual ao conteúdo exibido no modovisiblemas isso cria um novo contexto de formatação de bloco. "Os navegadores da área de trabalho exibem barras de rolagem se o conteúdo for maior que o tamanho do item."

Propriedades para elementos de posicionamento


CSS-properties responsáveis para o posicionamento de elementos, tais como top, right, bottome left, o valor é mantido auto. Sobre o que quero falar agora, aprendi durante a redação deste artigo.

Considere o seguinte layout.


Layout da demonstração

Há um elemento pai com uma propriedade customizadapaddingque define o recuo. Este elemento tem outro elemento, um filho. O elemento filho está absolutamente posicionado, mas suas propriedades, responsáveis ​​pelo posicionamento, não estão configuradas. Aqui estão os estilos:

.wrapper {
    position: relative;
    padding: 16px;
}

.item {
    position: absolute;
    width: 100px;
    height: 100px;
}

O fato é que, em CSS, cada propriedade possui um certo valor inicial (o valor padrão). Se você examinar um elemento filho e observar os estilos computados, qual será o valor de sua propriedade left?


Examinando os estilos calculados do filho.O

valor padrão para a propriedadelefté este16px. De onde veio se nem perguntamos a ele? A razão para isso é que as propriedades de um elemento absolutamente posicionado são consistentes com seu pai mais próximo, cuja propriedade está configuradaposition: relative. O elemento pai tem uma propriedadepadding: 16px. Isso faz com que o filho seja colocado a 16 pixels dos lados superior e esquerdo do pai. Interessante, certo?

Agora você pode ter uma pergunta sobre qual é o uso disso para nós. Proponho lidar com isso.

Imagine que uma criança precisa ser colocada em100pxna borda esquerda do elemento pai ao exibir a página em telas pequenas e em telas grandes, é possível colocar o elemento onde ele estaria localizado ao aplicar os valores padrão.

Aqui está um estilo adequado para telas pequenas:

.wrapper {
    position: relative;
}

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

Como redefinir o valor da propriedade leftao exibir uma página em telas grandes? Além disso, o valor left: 0aqui não pode ser usado, pois isso levará ao fato de o elemento filho ser pressionado na borda do elemento pai, mas não precisamos dele. Dê uma olhada no layout da página mostrado abaixo. Ele esclarece meu argumento.


O elemento filho não se comporta corretamente.

Para repor as propriedades de posicionamento do elemento filho, você deve usar a construçãoleft: auto. Isso é afirmado no MDN da seguinte maneira: "Um elemento é colocado horizontalmente, pois teria que ser posicionado se fosse um elemento estático."

Isso significa que, ao colocar o elemento, a propriedade do elementopaddingpaiserá levada em consideraçãoe será garantido que o elemento filho não "cole" na borda do elemento pai.

Aqui está o CSS:

.item {
    position: absolute;
    left: 100px;
    width: 100px;
    height: 100px;
}

@media (min-width: 800px) {
    .item {
        /*  -  left: 16px */
        left: auto;
    }
}

O mesmo se aplica a uma propriedade top. Os valores calculados das propriedades righte bottomdefinidos por padrão são equivalentes, respectivamente, à largura e altura do elemento.

Aqui está um projeto de demonstração para esta seção.

Exemplos de uso do valor automático


Devo dizer imediatamente que os exemplos dados aqui não cobrem todas as possibilidades de significado auto, mas espero que o que eu digo a você seja útil.

Arrow Seta da dica de ferramenta


Ao criar dicas de ferramentas, eles precisam ter uma seta apontando para o objeto ao qual a dica de ferramenta se refere. Portanto, essas dicas são mais compreensíveis. No caso de estarmos desenvolvendo um sistema de design, precisamos fornecer diferentes estados de prompt. Por exemplo, solicita uma seta apontando para a esquerda e uma seta apontando para a direita.


Setas direcionais apontando em direções diferentes

.tooltip:before {
    /*   */
    position: absolute;
    left: -15px;
}

/*    ,   */
.tooltip.to-right:before {
    /*   */
    position: absolute;
    left: auto;
    right: -15px;
}

Observe que eu usei a propriedade left: autopara substituir a propriedade left: -15pxna implementação original. E assim você sabe, isso é usado com bastante frequência. Portanto, eu recomendaria usar o seguinte em vez da abordagem acima:

.tooltip:before {
    position: absolute;
    right: 100%;
}

.tooltip.to-right:before {
    /*   */
    position: absolute;
    right: auto;
    left: 100%;
}

Usando um valor 100%, evitamos usar um valor fixo (largura da seta), o que pode levar ao mau funcionamento do sistema se o tamanho da seta mudar. Esta solução é mais adequada para possíveis alterações futuras.

▍ Placa Componente


Talvez seu projeto tenha um cartão de componente no qual, no canto superior esquerdo, seja algum tipo de ícone. Pode desempenhar um papel decorativo ou pode ser um botão para executar uma ação. Independentemente da função do ícone, os componentes precisam ser projetados para que o ícone possa ser posicionado no canto superior esquerdo e no canto superior direito. Aqui está como fica.


Placa componente com um ícone localizado em diferentes ângulos

Usando uma propriedade,left: autoé possível redefinir facilmente o valor da propriedade especificada em sua implementação básica. Aqui está o CSS:

.card .icon {
    position: absolute;
    left: 15px;
    top: 15px;
}

.card.is-right .icon {
    left: auto;
    right: 15px;
}

Layouts do Flexbox e valor da propriedade de margem automática


Os layouts Flexbox oferecem aos desenvolvedores da Web possibilidades verdadeiramente infinitas. Combinando os recursos desses layouts com os campos, cujo valor é usado para configurá-los auto, podemos criar layouts muito poderosos.

Considere o seguinte exemplo.


Ajuste automático dos campos do elemento

Há um contêiner vertical que contém o título do elemento, sua descrição e botão localizado à direita. Precisamos que o botão seja anexado ao lado direito do contêiner.

Aqui está a marcação:

<div class="item">
    <div class="item-group">
        <!--    -->
    </div>
    <button class="item__action">Confirm</button>
</div>

Aqui estão os estilos:

    .item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .item__action {
        margin-left: auto;
    }

Feito! O uso da propriedade margin-left: autopermite que você coloque o botão no canto superior direito do elemento. O que é ainda melhor é que podemos usar propriedades lógicas de CSS se estivermos desenvolvendo um site multilíngue. O CSS será algo como isto:

.item__action {
    margin-inline-start: auto;
}

Se você quiser saber mais sobre o estilo RTL, aqui está um recurso útil dedicado a este tópico.

Layouts de grade e valor automático da margem


Ajustando os campos dos elementos Grade, você pode definir valores fixos e percentuais, e também - você pode usar o valor auto. Estou particularmente interessado no significado auto. Veja o seguinte layout.


Layout da grade

Aqui está um fragmento da marcação:

<p class="input-group">
    <label for="">Full Name</label>
    <input type="email" name="" id="">
</p>

Aqui estão os estilos:

.input-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;

  @media (min-width: 700px) {
    grid-template-columns: 0.7fr 2fr;
  }
}

Gostaria de alinhar os rótulos, elementos label, na borda esquerda dos campos para inserir dados (elementos input). Para fazer isso, você precisa aplicar o seguinte estilo:

.input-group label {
    margin-left: auto;
}

A aplicação desse estilo resultará no resultado mostrado na figura a seguir.


Legendas à esquerda para entrada de dados

▍ Projeto de janelas modais



Janela modal

Ao trabalhar no design de janelas modais, é importante considerar que o conteúdo que precisa ser exibido na janela pode não caber totalmente nele. Para que a janela funcione normalmente nessa situação, você pode usar o seguinte estilo:

.modal-body {
    overflow-y: auto;
}

Graças a esse estilo, a barra de rolagem aparece apenas se o conteúdo da janela for grande o suficiente.

Sumário


Neste artigo, examinamos os recursos da aplicação da palavra-chave autoem CSS. Esperamos que você ache útil o que lê hoje.

Queridos leitores! Em que situações você usa valor autoem CSS?

More articles:


All Articles