Unidad 13. Posicionamiento. Flexbox. Grid (VIII)

13.8. Cajas flexibles. Flexbox

En este vídeo vemos una introducción a las cajas flexibles:

Después de unos años utilizando el posicionamiento flotante y otros procedimientos que no han resultado fáciles de usar, ni suficientemente adecuados para los diseños adaptables, han aparecido dos nuevas formas de posicionamiento que mejoran la situación anterior. El modelo de caja flexible(flex) y el modelo de rejilla o (grid).

El nuevo modelo de caja basado en la propiedad display: flex permite diseñar la interfaz de una página web con gran flexibilidad y sencillez. Los elementos de una caja flexible pueden colocarse en sentido horizontal o vertical, adaptarse al contenido o fijar unas dimensiones mínimas y máximas, o establecer porcentajes respecto a la caja. Se puede decidir si se mantienen en una línea o si desbordan a la siguiente. También puede variarse el orden de colocación de los elementos, así como el tipo de alineación horizontal y vertical.

 

Este modelo se basa en el posicionamiento en una dirección (vertical u horizontal), pero permite el anidamiento, con lo cual se puede usar para un diseño en dos dimensiones tipo rejilla, aunque como veremos más adelante, para este propósito existe el modelo genuino de rejilla (grid).

Por otro lado, el modelo de cajas flexibles evita los problemas de solapamiento y descuadre que podían producirse con los anteriores modelos de posicionamiento absoluto y flotante.

Todas están características hacen que este modelo sea muy adecuado para los diseños adaptables que se están imponiendo en la actualidad.

Vamos a explicar el modelo utilizando el siguiente esquema:

Definiciones.

Contenedor flexible, es el nuevo tipo de contenedor que se define con la propiedad display: flex. Este contenedor flexible se comporta de forma similar a un contenedor de bloque en el sentido que ocupa todo el espacio disponible hasta el final de la línea o del elemento que lo contiene. Sin embargo tiene algunas diferencias con los contenedores de bloques, por ejemplo, los elementos flotantes no se pueden usar y los márgenes no se colapsan. Mientras no digamos lo contrario, en el resto de esta unidad nos estaremos refiriendo a este tipo de contenedor.

Contenedor flexible en línea, es un nuevo tipo de contenedor que se define con la propiedad display: inline-flex. Se comporta de forma similar a un elemento en línea en el sentido que sólo ocupa el espacio necesario. Lo veremos al final de la unidad.

Elemento flexible es cualquier elemento que este dentro de un contenedor flexible y por lo tanto sujeto las propiedades del contenedor flexible. Es decir, no es necesario definir los elementos que hay dentro de un contenedor flexible con la propiedad display: flex, sino que se convierten de forma automática en elementos flexibles. Por ejemplo, si creamos un contenedor div dentro de un contenedor flexible, perderá su condición de elemento de bloque y se convertirá en un elemento flexible. Dicho de otra forma, la forma natural de trabajar con cajas flexibles es crear un contenedor flexible y colocar dentro los elementos que queramos convertir en elementos flexibles. Esto lo vamos a ver en el ejemplo que hay un poco más abajo.

Eje principal o dirección principal, es la dirección en la que se van colocando los elementos flexibles. Se controla con la propiedad flex-direction.

la propiedad flex-direction, que toma los valores row, column, row-reverse y column-reverse:

- row, es el valor por defecto, que es la más natural, dirección horizontal de izquierda a derecha. Es el esquema que acabamos de ver.

Como la dirección principal es la horizontal de izquierda a derecha el tamaño principal será la anchura del contenedor, y el tamaño secundario la altura del contenedor. Por los mismos motivos el inicio de la dirección principal será el borde izquierdo y el fin el borde derecho. Asi como el inicio de la dirección secundaria será el borde superior y el fin el borde inferior. Esto quiere decir que los elementos flexibles se colocarán desde la esquina superior izquierda hacia la derecha y cuando no quepan en esa fila, (si especificamos la propiedad wrap, que veremos después) se colocarán en la fila inferior, así hacía la esquina inferior derecha. Si no especificamos la propiedad wrap no pasarán a la fila inferior.

En los ejemplos que vamos a ver a continuación el contenedor flexible tiene fondo gris y los elementos tienen fondo amarillo con borde punteado, todo dentro de un contenedor div con fondo blanco de 400x200px. :

Ejemplo: Si para el contenedor flexible escribimos el código: display: flex; se aplica el valor por defecto flex-direction: row, y los elementos se colocan de izquierda a derecha, ajustados al principio (a la izquierda). Como decíamos, los elementos son contenedores div normales, pero que pierden su condición de elementos de bloque para convertirse en elementos flexibles.

 

El código completo del contenedor y los tres elementos es el siguiente (salvo los colores de fondo y márgenes) :

<div style="display: flex;>
	<div>Elemento  flexible 1 </div>
	<div>Elemento  2</div>
	<div >Elem.  3</div>
</div>