Flexbox avanzado (envolver y crecer)

En esta lección controlarás qué elementos se estiran para ocupar el espacio sobrante y qué ocurre cuando no caben todos en una fila.

flex-wrap: wrap permite que los elementos pasen a la siguiente línea en lugar de comprimirse hasta lo absurdo. flex-grow: 1 le dice a un elemento «quédate tú con el espacio que sobre»; los que no lo llevan mantienen su ancho natural.

En el código de ejemplo, las cajas A y C conservan el ancho de su contenido y solo B se estira. Estrecha la vista previa y comprobarás además cómo las cajas saltan de línea gracias a flex-wrap.

Un punto que confunde: flex: 1 es una abreviatura de flex-grow: 1; flex-shrink: 1; flex-basis: 0%, y ese flex-basis: 0% hace que el contenido deje de influir en el reparto. Si quieres que el tamaño natural cuente, usa flex-grow: 1 a secas, como en este ejemplo.

Este par de propiedades resuelve la mayoría de barras de navegación reales: logotipo a la izquierda con ancho fijo, un elemento flexible en medio que absorbe el espacio y botones a la derecha.