Usando flexbox:
HTML:
<div class = "container">
<div class = "box a">1</div>
<div class = "box b">2</div>
<div class = "box c">3</div>
<div class = "box a">4</div>
<div class = "box b">5</div>
<div class = "box c">6</div>
<div class = "box a">7</div>
<div class = "box b">8</div>
<div class = "box c">9</div>
</div>
CSS:
.container {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
width:80%;
background-color: #ccc;
margin: 0 auto;
}
.box {
min-width:100px;
max-width:150px;
min-height:30px;
flex-grow: 1;
}
.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }
O tamanho dos boxes pode ser alterado usando o min-width
e o max-width
. Somente em casos extremos, apareceria a margem direita, mas isso um @media resolveria (para eliminar o max-width
de telas muito estreitas).
Demo: http://jsfiddle.net/Bacco/FGYrH/
Usando JavaScript:
Esta solução foi simplificada para um DIV de largura fixa nos boxes, mas com alguns ajustes (e mais um pouco de matemática :P ) pode ser adaptada para largura flexível:
Acrescentamos um div
externo de referência, e um span
para não permitir que os floats fiquem escapando do container
:
HTML:
<div id="reference">
<div id="container">
<div class="box a">1</div>
<div class="box b">2</div>
<div class="box c">3</div>
<div class="box a">4</div>
<div class="box b">5</div>
<div class="box c">6</div>
<div class="box a">7</div>
<div class="box b">8</div>
<div class="box c">9</div>
<span class="clr"></span>
</div>
</div>
CSS:
#reference, #container, .box {
padding: 0;
margin: 0;
}
#reference {
position:relative;
background-color: #ffc;
}
#container {
position: relative;
background-color: #ccc;
}
.box {
float: left;
width:100px;
min-height:30px;
}
.clr {
display:block;
clear:both;
}
.a { background-color: #fcc }
.b { background-color: #cfc }
.c { background-color: #ccf }
Até aí, fica um layout tradicional, com margem sobrando do lado direito. Perde-se um pouco da estética desejada se por algum motivo a pessoa estiver navegando com JS desabilitado, mas a usabilidade permanece.
Para dar o acabamento final, centralizando o container
, resolvemos com uma pequena função JS, que deve ser chamada no onload
, no onresize
(ou depois de quaisquer alterações de layout feitas com JS ou algum framework):
JS:
window.onresize = function() {
b2AdjustPadding();
}
function b2AdjustPadding() {
var boxSize = 100; // Ponha o mesmo width que estiver no CSS
var reference = document.getElementById('reference');
var remaining = reference.offsetWidth % boxSize;
var padLeft = Math.round( remaining / 2 );
var padRight = remaining - padLeft;
reference.style.paddingLeft = padLeft+"px";
reference.style.paddingRight= padRight+"px";
}
O que fizemos aqui foi basicamente o seguinte: Ao mudar a largura da página, calculamos quanto sobra de margem, usando o módulo ( %
). Depois dividimos isto no meio, arredondando, para adicionar um padding esquerdo no nosso elemento reference
. O que sobrar, colocamos no padding direito, pra não sobrar margem de lado nenhum.
Notar que as margens são calculadas separadamente, para problemas de arredondamento não deixarem um pixel sobrando do lado direito, o que aconteceria em certas larguras.
Lembre-se de colocar a mesma largura no CSS e na variável boxSize
. Se preferir, pode obter o tamanho dinamicamente, mas acho um tanto de exagero (a não ser que vá fazer uma lib para isso).
Demo: http://jsfiddle.net/Bacco/232Gk/