Los elementos flexbox permiten crear algunos diseños de página bastante complejos. Es perfectamente aceptable configurar un elemento flexible para que también sea un contenedor flexible, de modo que los elementos secundarios también se dispongan como cajas flexibles. Echa un vistazo a complex-flexbox.html (consúltalo en vivo).
El HTML para ello es bastante simple. Hay un elemento <section> que contiene tres elementos <article>. El tercer elemento <article> contiene tres elementos <div>:
.png "carbon(402).png")
Veamos el código que hemos usado para esta compaginación.
En primer lugar, configuramos los elementos secundarios de <section> para que se presenten como cajas flexibles.
.png "carbon(403).png")
A continuación, establecemos algunos valores flexibles en los elementos <article>. Presta una atención especial a la segunda regla: configuramos el tercer elemento <article> para que sus hijos también se presenten como elementos flexibles, pero esta vez los disponemos en una columna.
.png "carbon(404).png")
A continuación, seleccionamos el primer elemento <div>. Primero usamos flex:1 100px; para darle una altura mínima efectiva de 100 px, luego configuramos sus elementos secundarios (los elementos <button>) para que también se presenten como elementos flexibles. Aquí los colocamos en una fila que los delimita y los alineamos en el centro del espacio disponible, como hicimos en el ejemplo del botón individual que vimos antes.
.png "carbon(405).png")
Por último, establecemos un tamaño para el botón, pero lo más interesante es que le damos un valor flexible de 1 auto. Esto tiene un efecto muy interesante, que puedes observar si cambias el tamaño del ancho de la ventana de tu navegador. Los botones ocuparán tanto espacio como puedan y se asentarán tantos en la misma línea como quepan, pero cuando ya no quepan con comodidad en la misma línea, saltarán de línea y crearán líneas nuevas.
.png "carbon(406).png")