Delimitar

Un problema que surge cuando tienes una cantidad fija de ancho o alto en tu diseño es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y rompen el diseño. Echa un vistazo a nuestro ejemplo flexbox-wrap0.html e intenta verlo en vivo (toma una copia local de este archivo si deseas seguir este ejemplo):

Aquí vemos que los elementos hijo se salen de su contenedor. Una forma de solucionar esto es añadir la declaración siguiente a tu regla <section>:

Añade también la declaración siguiente a tu regla <article>:

Pruébalo; observa que al haberlo incluido el aspecto de la compaginación resulta mucho más agradable:

Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración flex: 200px que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho; discutiremos esta propiedad con más detalle más adelante. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.

Pero aquí podemos hacer mucho más. En primer lugar, cambia el valor de tu propiedad flex-direction a row-reverse; ahora verás que todavía tienes tu compaginación en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés.

Propiedades abreviadas de flex-flow

En este punto vale la pena señalar que hay una propiedad abreviada para flex-direction y flex-wrap: flex-flow. Así, por ejemplo, puedes reemplazar:

con