Unidad 13. Posicionamiento. Flexbox. Grid (XIV)



13.12. Flexbox. Tamaños

 

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 segun 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:

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet
Elem. 3

Ejemplo con más contenido:

Elemento flexible 1
Elemento 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora adipisci dolore reprehenderit dolores eum similique repellat, soluta in voluptates voluptatem
Elem. 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit

 

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.


Enero-2019 (V 2.02)
Pág. 13.14
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.