Cuando se ajusta a una nueva línea, quiero alinear esta nueva línea con el segundo elemento en la primera fila del flexbox.

Entonces, la verdadera pregunta es: ¿Cómo reorganizar los elementos flexibles cuando se produce el envoltorio?

Dado que HTML y CSS, por sí mismos, no tienen un concepto de cuándo se ajustan los elementos , no tienen control de esta situación. Tienes que manejarlo, ya sea con consultas de medios o JavaScript.

Una vez que haya seleccionado su método para detectar la envoltura, puede usar la propiedad order para reorganizar los artículos.

Para ampliar la fantástica respuesta de @MichaelBenjamin:

Dado que HTML y CSS, por sí mismos, no tienen un concepto de cuándo se ajustan los elementos , no tienen control de esta situación. Tienes que manejarlo, ya sea con consultas de medios o JavaScript.

Puede solucionar esto configurando un nuevo elemento principal y anidando el elemento único como el primer elemento secundario. Establezca este nuevo master-parent para display: flex; .

 div { font-family: arial, sans-serif; margin: 5px; color: white; border: 1px dotted black; } .parent { display: flex; flex-wrap: wrap; width: 300px; } .unique_element { background-color: Crimson; width: 30%; height: 27px; padding: 10px 10px 10px 10px; } .child { background-color: CornflowerBlue; padding: 10px 10px 10px 10px; } .master-parent { display: flex; width: 400px; }

 <div class="master-parent"> <div class="unique_element">First</div> <div class="parent"> <div class="child">Second</div> <div class="child">Third</div> <div class="child">Fourth</div> <div class="child">Fifth</div> </div> </div>

Puede crear dos divs dentro del div principal, uno que contenga el elemento único y otro que contenga elementos secundarios genéricos. Así es como se obtiene la separación

 <div class="parent"> <div class="unique-wrapper"> <div class="unique_element">First</div> </div> <div class="child-wrapper"> <div class="child">Second</div> <div class="child">Third</div> <div class="child">Fourth</div> <div class="child">Fifth</div> </div> </div>

Aplica estilo al CSS como se muestra. Tenga en cuenta que .unique-wrapper tiene flex: 3 porque establece el ancho del elemento en 30%.

 div { font-family: arial, sans-serif; margin: 5px; color: white; border: 1px dotted black; } .parent { display: flex; width: 300px; } .unique_element { background-color: Crimson; padding: 10px 10px 10px 10px; } .unique-wrapper, .child-wrapper { border: none; margin: 0; } .unique-wrapper { flex: 3; } .child-wrapper { flex: 7; display: flex; flex-wrap: wrap; } .child { width: auto; background-color: CornflowerBlue; padding: 10px 10px 10px 10px; }

Aquí está mi codepen si quieres jugar con el código.