Ejemplo sencillo con CSS3 flexbox
flex es un nuevo conjunto de propiedades de CSS3 que permiten meter varios elementos html dentro de una caja, en una fila o en una columna, de forma que se estiren a nuestro gusto y ocupar el alto/ancho disponible. Veamos algunos ejemplos sencillos.
Contenido central ancho y columnas laterales estrechas[editar]
Imagina que queremos un menú vertical en el lado izquierdo, un menú en el lado derecho, y un elemento central que se ensanche lo máximo posible. El siguiente código html/css daría el siguiente resultado :
<div style="display:flex">
<div>
<p>Item1</p>
<p>Item2</p>
</div>
<div style="flex:1;">
<p>Contenido central</p>
</div>
<div>
<p>Item1</p>
<p>Item2</p>
</div>
Item1
Item2
Contenido central
Item1
Item2
En el div principal, que por defecto tiene un ancho del 100%, le hemos puesto la propiedad display:flex. Esto convierte a este div en una "caja flexible". Podremos controlar el ancho de los elementos que van dentro de él, en su primer nivel.
Hemos metido tres div dentro de él. Uno para la columna izquierda, otro para el contenido central y otro para la columna derecha. Como queremos que sea el central el que se ensanche lo máximo posible, a este le ponemos el elemento CSS flex:1. El 1 indica que debe ensancharse. Si no ponemos nada, como en las dos columnas laterales, por defecto tienen flex:0, que indica que sólo deben ocupar el ancho necesario para su contenido.
Cabecera, contenido y pie[editar]
¿Y si queremos algo parecido, pero en vertical?. Por ejemplo, un elemento de cabecera de la página, el contenido central debajo que debe ensancharse en vertical lo máximo posible y un pie de página. El ejemplo es similar al anterior, únicamente debemos poner flex-direction:column. Este valor por defecto es row, que indica que los elementos van formando una fila, como en el caso anterior. Con column formarán una columna.
<div style="display:flex;flex-direction:column;height:200px;">
<div>
<p>Cabecera</p>
</div>
<div style="flex:1;">
<p>Contenido central</p>
</div>
<div>
<p>Pie</p>
</div>
Cabecera
Contenido central
Pie
Un único detalle. Normalmente los elementos ocupan en vertical lo que necesitan, por lo que de alguna forma debemos indicarle a la caja que altura queremos que tenga. En este ejemplo hemos puesto 200 pixels, pero si quieres que ocupen el total de la ventana del navegador, posiblemente tengas que poner que los tag html y body tengan una altura del 100%. El mismo body podría llevar el estilo display:flex, o bien un div que se ponga inmediatamente dentro del body, y que también tendría que llevar altura 100%.
Proporciones de tamaño[editar]
La propiedad flex de los elementos, en realidad admite un número entero que representa en que proporción debe estirarse el elemento. Con flex:0, que es el valor por defecto, el elemento no se estira. Con flex:2, el elemento se estirará el doble que uno que tenga flex:1. En el siguiente ejemplo, la primera columna no se estira, la segunda sí se estira y la tercera se estira el doble que la segunda
<div style="display:flex">
<div>
<p>Item1</p>
<p>Item2</p>
</div>
<div style="flex:1;">
<p>Contenido central</p>
</div>
<div style="flex:2;">
<p>Item1</p>
<p>Item2</p>
</div>
Item1
Item2
Contenido central
Item1
Item2
Otras propiedades[editar]
Hemos visto hasta ahora unos ejemplos sencillos, posiblemente los más habituales. Pero hay muchas más propiedades de flexbox que pueden ser útiles.
- justify-content permite indicar, en caso de que nuestros componentes no ocupen el 100% de la caja, si los queremos al principio de la caja ( justify-content:flex-start ), al final de la misma ( justify-content:flex-end ), centrados (justify-content:center) o distribuidos con espacios entre ellos.
- 'align-items similar a la anterior, pero en el otro eje. Por ejemplo, si nuestra caja coloca los elementos en un fila, la propiedad anterior justify-content dice cómo se colocan los elementos horizontalmente (en la fila), mientras que align-items lo hace en vertical, es decir, si los elementos se pegan arriba, se pegan abajo, etc.
El siguiente ejemplo juega con ambas propiedades para distribuirlos con espacios en horizontal y centrarlos verticalmente
<div style="display:flex;justify-content:space-around;align-items:center;">
<div>
<p>Item1</p>
<p>Item2</p>
</div>
<div">
<p>Contenido central</p>
</div>
<div>
<p>Item1</p>
<p>Item2</p>
</div>
Item1
Item2
Contenido central
Item1
Item2
justify-content:space-around hace que horizontalmente se distribuyan poniendo espacios delante, entre ellos y al final. align-items:center hace que se centren verticalmente dentro de su contenedor.
Enlaces[editar]
Hay más propiedades y más posibles valores para las propiedades que hemos explicado aquí. El siguiente enlace tiene todo esto más detallado.