Unidad 13. Posicionamiento. Flexbox. Grid (XVII)

Forma compacta flex

En este vídeo explicamos la forma compacta de flexbox y el diseño en columnas:

 

La propiedad compacta flex es una forma abreviada de establecer simultáneamente las tres propiedades flex-grow, flex-shrink y flex-basis. Deben existir los tres valores ya que se interpretan en ese orden.

Es recomendable usar esta forma compacta para asegurarnos definir las tres propiedades ya que las tres intervienen en la definición de la flexibilidad respecto al tamaño de un elemento.

Por ejemplo: el código flex: 1 1 content, es lo mismo que el código flex-grow:1; flex-shrink:1;  flex-basis: content.

Además hay cuatro valores prefijados para flex que lo hacen todavía más sencillo de usar, es decir en lugar de escribir tres valores, escribiremos uno de estos tres: initial, auto, none y número.

- flex: initial, equivale a flex: 0 1 auto, es decir los elementos no crecen si hay espacio libre, pero se estrechan si no hay espacio suficiente y se ajustan al contenido salvo que se especifique anchura y/o altura.

- flex: auto, equivale a flex: 1 1 auto, es decir los elementos crecen si hay espacio libre, se estrechan si no hay espacio suficiente y se ajustan al contenido salvo que se especifique anchura y/o altura.

- flex: none, equivale a flex: 0 0 auto, es decir los elementos no crecen si hay espacio libre, no se estrechan si no hay espacio suficiente y se ajustan al contenido salvo que se especifique anchura y/o altura. Este valor convierte en la practica el elemento en no flexible, puesto que no se le permite cambiar de tamaño automáticamente.