css - bootstrap - ¿Cómo funciona la propiedad de la orden en niños de un contenedor flexible en una posición absolutamente segura?

flexbox generator

Question

El capítulo de propiedad de order en CSS flexbox dice:

Los niños con posición absoluta de un contenedor flexible no participan en el diseño flexible, pero se reordenan junto con cualquier elemento flexible.

Pensé que el order en los niños de un contenedor flexible situados en una posición determinada los ubicaría en otro e intenté lo siguiente:

.container {display: flex}
.child1, .child2 {position: absolute}
.child1 {background: red}
.child2 {background: yellow}

<div class="container">
    <div class="child1">this is a first</div>
    <div class="child2">this is an second</div>
</div>

Cambié el order de los dos niños:

.container {display: flex}
.child1, .child2 {position: absolute}
.child1 {background: red; order: 2;}
.child2 {background: yellow; order: 1;}

<div class="container">
    <div class="child1">this is a first</div>
    <div class="child2">this is an second</div>
</div>

y no vi la primera vuelta sobre la segunda. Me pregunto qué significa el orden para los niños absolutamente posicionados.

Answer 1

Usar position: absolute para un elemento flexible no tiene mucho sentido, ya que simplemente anula el estado de flex-child de ese elemento. En su ejemplo, los dos elementos secundarios simplemente se colocan como estarían sin un contenedor flexible: dado que ambos no tienen la configuración superior / izquierda / derecha / inferior, ambos se colocan en la esquina superior izquierda predeterminada, en la parte superior uno del otro, en el orden en que aparecen en el código, el último sobre el anterior.

Los parámetros de order ya no tienen ninguna influencia ya que esos elementos ya no son elementos flexibles, y el order solo se aplica a los elementos flexibles "reales".

Mira mi fragmento: acabo de intercambiar el primer y el segundo div (dejando todos tus otros códigos como estaban), así que ahora el segundo div está encima del primero.

.container {display: flex}
.child1, .child2 {position: absolute}
.child1 {background: red; order: 2;}
.child2 {background: yellow; order: 1;}

<div class="container">
    <div class="child2">this is an second</div>
    <div class="child1">this is a first</div>
</div>

AGREGADO DESPUÉS DE COMENTARIOS de Michael_B:

Aquí hay otro fragmento, con dos elementos flexibles "reales" adicionales. Cuando todos los hermanos tienen parámetros de order , esto afecta a los elementos flexibles "reales", pero no a los elementos posicionados de manera absoluta, que simplemente se colocan uno encima del otro en el orden en que aparecen en el código y también en la parte superior del mismo. flex-items.

.container {display: flex; }
.child1, .child2 {position: absolute; }
.child1 {background: red; order: 2;}
.child2 {background: yellow; order: 4;}
.child3 { border: 1px solid green; order: 3;}
.child4 { border: 1px solid blue; order: 1;}

<div class="container">
    <div class="child2">this is an second</div>
    <div class="child1">this is a first</div>
    <div class="child3">this is a real flex-item 3</div>
    <div class="child4">this is a real flex-item 4</div>
</div>

Answer 2

La declaración que citó de la especificación:

Los niños con posición absoluta de un contenedor flexible no participan en el diseño flexible, pero se reordenan junto con cualquier elemento flexible.

... no existe realmente en la definición de la propiedad de la order . Está incluido al final de la especificación en la sección de aclaraciones.

No obstante, la definición de order dice esto:

Se aplica a: elementos flexibles y niños de contenedores flexibles en posición absoluta

Pero eso es todo lo que dice la definición acerca de los niños con posición absoluta de un contenedor flexible. No hay más orientación o aclaración.

Por lo tanto, los fabricantes de navegadores tienen una gran discreción a la hora de implementar esta función. Y parece que los principales navegadores ni siquiera han comenzado su implementación, ya que las pruebas muestran que el order está haciendo nada al abstener a los niños de un contenedor flexible. Probado en Chrome, FF, IE11 y Edge.

Aquí hay un comentario interesante de una pregunta relacionada :

No considero que esta sea una solución legítima, pero si agrego position:absolute con algo de javascript después de cargar la página en lugar de que esté en el archivo css, el order funciona como se esperaba