Una versione precedente della specifica di layout CSS Flexible Box impostava la posizione statica degli elementi figlio con posizionamento assoluto come se fossero un elemento flessibile di dimensioni 0 x 0 px. La versione più recente della specifica li estrae completamente dal flusso e imposta la posizione statica in base alle proprietà align e justify. Al momento della stesura del presente documento, Edge e Opera 39 per computer 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, il <div> nidificato sarà perfettamente centrato nel <div> contenitore.
Nei browser non conformi, l'angolo in alto a sinistra della casella verde si troverà al centro in alto della casella rossa.
Se vuoi provare questa funzionalità in Chrome o in qualsiasi altro browser, scarica il nostro sample o visita la demo dal vivo.