Principais diferenças entre as propriedades de posicionamento CSS

Sou desenvolvedor front-end a muito tempo e sempre que me perguntam para que serve cada uma das propriedades de posicionamento, eu dou uma travada e não sei responder com certeza, apenas sei como se comportam na prática.

Tendo isso como base, resolvi esclarecer de uma forma simples o que cada uma faz. Assim você também vai entender e escolher qual a melhor a ser usada ou entender o comportamento padrão de alguns elementos que tem essas propriedades. Vamos lá.

O display: inline permite que os elementos se posicionem um do lado do outro, a limitação do display: inline é que os elementos não aceitam modificações tanto a width quanto a height.

O display: inline-block permite que os elementos se posicionem um do lado do outro. O display: inline-block aceitam modificações em sua width e height. Por esse motivo o display: inline-block é muito mais interessante na maioria dos casos do que o display: inline. Uma dificuldade do display: inline-block é fazer espaçamento dos elementos entre si, é preciso colocar margins e fazer alguns cálculos.

float: left | right
Embora tenha sido o meu preferido durante anos e até hoje ainda uso bastante para resolver coisas rápidas, o float é mais complicado, ele empurra o elemento para um dos lados (left | right) e os elementos que estão embaixo sobem. O float não permite usar a propriedade vertical-align: middle para alinhar os elementos verticalmente. Então, para usar o float você tem que está sempre calculando as distâncias para que tudo ocorra da forma planejada.

O display: flex veio para salvar nossa vida e facilitar o posicionamento de elementos. Ele permite que você ajuste o posicionamento, espaçamento e alinhamento dos elementos de forma intuitiva e sem fazer muitos cálculos. O display flex é um pouco mais complicado de usar no inicio pois existem muitas propriedades mas que são justamente para melhorar nosso código e facilitar nossa vida.

Com tudo, concluo que você deve aprender, usar e abusar do display flex pois ele facilita nossa vida 🙂

Espero que tenha ajudado a você entender um pouco sobre essas propriedades. Até mais.

Add a Comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *