Flexbox adquiere un nuevo comportamiento para los elementos secundarios en posición absoluta

Joe Medley
Joe Medley

Una versión anterior de la especificación de diseño del cuadro flexible de CSS establece la posición estática de los elementos secundarios de posicionamiento absoluto como si fueran un elemento flexible con un tamaño de 0 px por 0 px. La versión más reciente de la especificación las quita por completo del flujo y establece la posición estática según las propiedades de alineación y justificación. En el momento en que se redactó este documento, Edge y Opera 39 para computadoras de escritorio y Android ya admiten esta opción.

Por ejemplo, apliquemos algunos comportamientos de posicionamiento al siguiente código 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>

Agregaremos algo como lo siguiente:

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

En Chrome 52 y versiones posteriores, el elemento <div> anidado estará perfectamente centrado en el contenedor <div>.

Comportamiento de Chrome52.

En los navegadores que no cumplen con los requisitos, la esquina superior izquierda del cuadro verde estará en la parte superior central del cuadro rojo.

Comportamiento legaci.

Si quieres probarlo en Chrome o en cualquier otro navegador, descarga nuestra muestra o visita la demostración en vivo.