Unidad 13. Posicionamiento. Flexbox. Grid (XIV)

13.12. Flexbox. Tamaños

En este vídeo explicamos el manejo de los tamaños con cajas flexibles:

Tamaños.

En un contenedor flexible los tamaños están en función de las direcciones primaria y secundaria. Esto quiere decir que por defecto (con flex-direction: row), la anchura es la dirección primaria y la altura la secundaria, es decir, lo normal. Sin embargo si flex-direction: colum, la altura es la dirección primaria y la anchura la secundaria.

En un contenedor flexible los elementos flexibles ajustan su tamaño según el contenido. Mientras haya espacio en la dirección principal (por defecto, la anchura) los elementos se irán expandiendo en esa dirección. Cuando no haya más espacio en la dirección principal, se irán expandiendo en la dirección secundaria (por defecto, la altura) siempre teniendo en cuenta que el tamaño en la dirección secundaria sea el menor posible, por lo tanto, podrá recalcularse el espacio en la dirección principal.

Para apreciar esto, fíjate en los dos ejemplos siguientes en los que las definiciones del contendor display: flex son las mismas (los valores por defecto) lo que cambia es la cantidad de texto del contenido. Si puedes modificar la anchura de tu navegador verás como la altura de los elementos se va recalculando según lo que acabamos de explicar. (Hemos definido el contenedor exterior con una anchura variable del 50% de la anchura de la ventana, para que se vea el efecto al modificar la anchura)

Ejemplo con poco contenido:

Ejemplo con más contenido:

Este comportamiento por defecto, se puede modificar con varias propiedades: flex-grow, flex-shrink y flex-basis. Modificando estas propiedades lograremos que los elementos sean más o menos flexibles, incluso que no sean flexibles.

 Cursos Informática Gratuitos