Caixas flutuantes, o mistério

Quando trabalhamos com desenvolvimento há um bom tempo, acabamos fazendo as coisas quase sempre da mesma forma.

No começo, ou quando encontramos algum novo desafio, é comum ficar pensando em qual é a “melhor” forma de fazer algo. Uma vez que chegamos à solução, colocamos ela no nosso “repositório” mental e a partir desse momento é comum fazermos “esse algo” seguindo a mesma “solução”. Obviamente, eu não sou a exceção.

Esta semana, um colega teve que fazer uma alteração em um componente que eu criei há um ano atrás, e enfrentou alguns problemas. Quando veio conversar comigo sobre isso, parei para analisar o código e ver se eu não tinha feito %$#@ (afinal, ninguém é perfeito né =P) e fiquei feliz de saber que não estava tão ruim. =)

O componente em questão tinha a seguinte estrutura:

Problema box-1

O que meu colega precisava fazer era deixar ele assim:

Problema box 2

Antes de seguir com as explicações, vou dar um spoiler: Sempre que eu tenho que fazer esse tipo de box, utilizo o método do float =P (vou explicar com detalhes os prós e os contras mais a frente).

Acabamos conversando sobre algumas formas de fazer o código destas caixas, seus respectivos prós e contras, e finalmente ele decidiu manter o float e executou a solução básica ao problema que é “chumbar” um valor fixo no height do conteúdo (novamente, falarei sobre isto depois).

A questão é que eu fiquei sismada e comecei a analisar as soluções possíveis para este “problema”. A verdade é que se você entrega um layout para dez desenvolvedores front-end, você com certeza terá dez soluções diferentes para fazer a mesma coisa, umas um pouco mais (ou um pouco menos) “corretas” que outras, mas todas funcionais.

Bom, vou parar de mimimi enrolar e partir para o código (e as respectivas explicações) das “soluções” que consegui arrancar da minha cabeça (e experiência).

O HTML

A marcação que utilizarei para o exemplo é esta aqui:

Como podem ver, é uma marcação ultra simples e consistente com caixas de texto comuns. Dependendo do conteúdo, logicamente as tags seriam diferentes para tornar o código mais semântico (eu sou apaixonada por semântica =P).

Flexbox

O HTML5 e o CSS3 vieram para mudar inúmeros paradigmas e melhorar a vida dos desenvolvedores (so falta os browsers e os usuarios perceberem isso =P).

O método do flexbox é sem dúvidas o mais fácil, cool e moderno que temos no nosso leque de opções.

Vejamos como fica o código utilizando flexbox:


.container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
width: 500px;
}
.box {
margin: 1em 2.5%;
width: 40%;
}
See the Pen Box problem [flexbox] by Andréa Zambrana (@akfzambrana) on CodePen.
15902

Eu sei, eu sei, fica lindo ne? mas antes de nos empolgarmos, vamos analisar os prós e contras.

Prós

  • Fácil implementação
  • Fácil manutenção
  • Fácil leitura

Contras

  • Só funciona do IE10 pra frente (e no 10 não funciona direito, já que foi aplicada a especificação anterior).

Observação: Dependendo do suporte mínimo de browser que você aplica no seu projeto (onde trabalho é IE8+), tal vez o uso deste método seja completamente inviável. Muitos dirão que você pode utilizar um polifill, mas eu digo, sera que vale a pena carregar mais uma ferramenta/framework/plugin/magia-negra sendo que da para fazer com outros métodos e utilizando somente css?

Float

Bom, o segundo método é utilizando o float. Acredito que a maioria das pessoas faça assim, pelo menos é o meu default para este tipo de layout (e foi o que o meu colega questionou).

O código fica assim:


.container {
margin: 0 auto;
width: 500px;
}
.box {
float: left;
//height: 14em; //necessario se ie8
margin: 1em 2.5%;
width: 40%;
// se o suporte for ie9+ da pra resolver assim
&:nth-child(2n+1){
clear: left;
}
}

See the Pen Box problem [float] by Andréa Zambrana (@akfzambrana) on CodePen.
15902

Let’s see…

Prós

  • Suporte a partir do IE6 (por isso comecei a usar este método)
  • Fácil leitura
  • Reutilizável, já que não importa quantos boxes você tenha o layout sera mantido
  • Fácil manutenção, se teu suporte é so IE9+

Contras

  • Se você da suporte a IE8 a manutenção fica chata, você precisa fica ajustando a altura dos boxes ou colocar clear:both  (sux :/)
  • Precisa utilizar a técnica de “clearfix” no pai das caixas para evitar bugs.

Como já falei antes esta é sempre minha escolha, porque podemos dizer que é a menos bugada depois do flexbox.

Display: inline-block

Outra forma de resolver o problema das caixas é utilizando o método do inline-block. Este método é tão consistente quanto o do float e se o seu layout não precisar ser “pixel perfect” vale muito a pena utilizar ele.


.container {
margin: 0 auto;
width: 500px;
}
.box {
display: inline-block;
margin: 1em 2.5%;
vertical-align: top; // necessario para o alinhamento correto
width: 40%;
}

See the Pen Box problem [inline-block] by Andréa Zambrana (@akfzambrana) on CodePen.
15902

O problema desta solução é o espaçamento a mais que é deixado pelo browser sempre que você utiliza o “display: inline-block;”.

float-flex-box

 

inline-block

 

Existem várias formas de tratar esse “espaço a mais”, como mostram o artigo do  e artigo do Chris Coyier, no entanto, acho elas muito “gambiarte” pro meu gosto, claro que cada um utiliza a solução que mais lhe agrada e que melhor lhe atende ne? ;P

Prós

  • Fácil manutenção
  • Fácil leitura
  • Fácil reutilização

Contras

  • Se seu layout for “pixel perfect” tem q fazer uma das “gambiartes” pra arrumar o espaçamento

Display: table

Bora finalizar esta novela ;P.

Existe uma última técnica (que eu não gosto nem um pouco, ja vou explicar por que) que pode ser utilizada, o “display table“.

O código fica assim:


.container {
display: table;
margin: 0 auto;
width: 500px;
}
.row {
display: table-row;
}
.box {
display: table-cell;
padding: 1em 2.5%;
width: 40%;
}

See the Pen Box problem [table] by Andréa Zambrana (@akfzambrana) on CodePen.
15902

O que eu mais odeio nesta técnica é o fato de ter que “adicionar marcação” para criar as “trs falsetas”. Como sou fã roxa ferrenha de semântica, acredito que ter que adicionar marcação por causa de layout é uma !@#$% não compensa, ainda mais tendo outras formas melhores de fazer a mesma coisa. Mas, novamente, o intuito deste post é mostrar todas as técnicas em que consegui pensar e acredito que isso foi feito.

A pesar do espanto geral, esta é a técnica que da menos problema/bugs entre os browsers e funciona a partir do IE6.

Prós

  • Suporte IE6+
  • Leitura mediana

Contras

  • Manutenção ruim
  • Marcação desnecessária

Espero que de alguma forma este post seja útil para alguem. Demorei um pouco para terminar de escrever (várias semanas), mas finalmente consegui e ta ai pra vocês.

Bjs da titia!

PS: Se conhecem alguma outra “técnica” comentem que adiciono no post