O Flexbox recebe um novo comportamento para filhos em posição absoluta

Joe medley
Joe Medley

Uma versão anterior da especificação de layout CSS flexível Box definiu a posição estática de filhos de posição absoluta como se eles fossem um item flexível com tamanho de 0 px por 0 px. A versão mais recente da especificação os remove totalmente do fluxo e define a posição estática com base nas propriedades align e justify. No momento em que este artigo foi escrito, o Edge e o Opera 39 para computador e Android já tinham suporte a isso.

Por exemplo, vamos aplicar alguns comportamentos de posicionamento ao HTML a seguir.

<div class="container">
    <div>
    <p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
    </div>
</div>

Vamos adicionar algo assim:

.container {  
    display: flex;  
    align-items: center;  
    justify-content: center;   
}  
.container > * {  
    position: absolute;  
}

No Chrome 52 ou versões mais recentes, a <div> aninhada estará perfeitamente centralizada no contêiner <div>.

Comportamento do Chrome52.

Em navegadores não conformes, o canto superior esquerdo da caixa verde vai ficar no centro superior da caixa vermelha.

Comportamento do Legaci.

Se você quiser testar esse recurso no Chrome ou em qualquer outro navegador, faça o download da nossa amostra ou acesse a demonstração ao vivo (links em inglês).