Una versione precedente della specifica del layout Riquadro flessibile CSS imposta la posizione statica degli elementi secondari con posizioni assolute, anche se si tratta di un elemento flessibile le cui dimensioni sono pari a 0 x 0 px. La versione più recente della specifica elimina completamente il flusso e imposta la posizione statica in base alle proprietà di allineamento e giustificazione. Al momento della stesura di questo articolo, Edge e Opera 39 per desktop e Android supportano già questa funzionalità.
Ad esempio, applichiamo alcuni comportamenti di posizionamento al seguente codice HTML.
<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>
Aggiungeremo qualcosa di simile al seguente:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
In Chrome 52 o versioni successive, l'elemento <div> nidificato sarà perfettamente centrato nel
contenitore <div>.
Nei browser non conformi, l'angolo in alto a sinistra della casella verde si troverà in alto al centro della casella rossa.
Se vuoi provare questa funzionalità in Chrome o su qualsiasi altro browser, scarica il nostro esempio o visita la demo dal vivo.