Dias atrás cá estava eu, estudando sobre flexbox e acabei lendo a cerca de uma propriedade css chamada flex. Um possível valor que pode ser atribuído à ela seria o valor initial. Ele faz como se a propriedade css flex estivesse utilizando seus valores default. Utilizar seus valores default, em outras palavras, seria como se não houvesse nenhum valor ainda atribuído para uma regra css específica, fazendo com que ela ficasse com um valor automaticamente pré-atribuído pelo próprio navegador para aquele elemento HTML.
Glosário de termos
- Shorthand property: refere-se à uma regra css que possui a capacidade de abreviar múltiplas regras css (chamadas também de longhand properties) em uma única regra somente. Por exemplo, a propriedade flex, consegue abreviar outras três regras css, flex-grow, flex-shrink e flex-basis.
- Longhand property: refere-se a regras css que podem ser declaradas de forma lateral, ou seja, através de outras regras css (também chamadas de shorthand properties).
Imagine um cenário que você tivesse que declarar uma (ou mais do que uma) de algumas das seguintes regras css em um elemento HTML, através de algum seletor css:
- flex-grow
- flex-shrink
- flex-basis
Como você faria para modificar o comportamento adquirido com essas propriedades?
Uma possível solução seria criar outro seletor css, com uma cascading order mais alta, para que o comportamento anterior pudesse ser substituído por esse novo comportamento. Você atribuíria um novo valor para uma ou mais dessas regras css, todas elas agrupadas nesse novo seletor css.
Digamos que o comportamento desejado utilizasse valores que fossem exatamente os mesmos valores pré-estabelecidos pelo navegador, caso você não atribuísse nenhum seletor css a esse elemento HTML (como se fosse um “reset” de propriedades). Você ainda teria o trabalho de atribuir o valor a cada uma dessas regras, dentro desse novo seletor css.
Mas, e se você pudesse fazer isso utilizando apenas uma declaração de regra css? Como? Oras, utilizando o valor initial.
Lembra-se das propriedades conhecidas como longhand? Elas possuem a capacidade de abreviar diversas regras css em somente uma única regra. Utilizando o valor initial em conjunto com elas, você consegue fazer tudo isso em uma única linha.
Resumidamente, flex: initial; faz com que flex-grow, flex-shrink e flex-basis fiquem automaticamente todas com o valor initial, ou seja:
- flex-grow: initial;
- flex-shrink: initial;
- flex-basis: initial;
Por hoje é só…
Top comments (0)