Flex

Profesores: JAB y Ester Torres

Flex Box, es una de las últimas aportaciones de CSS3 a la tecnología HTML5 que más adeptos está teniendo y más posibilidades está aportando para que el Responsive Design se extienda sin que signifique un aumento de trabajo, sino todo lo contrario.

¿Qué es Flex?:
Flex es un valor de la propiedad de CSS llamada display, que a partir de una serie de propiedades CSS podemos configurar de una manera rápida y sencilla cómo se van a distribuir las diferentes cajas que contiene un contenedor padre. De esta manera se favorece la flexibilidad del contenido respecto a la resolución del dispositivo en que se muestra. Vamos a hacer un ejemplo práctico muy sencillo para comprender su funcionamiento con el siguiente código HTML base.

Propiedades CSS:
<section id="contenedor">

<div class="hijo">
1
</div>

<div class="hijo">
2
</div>

<div class="hijo">
3
</div>

<div class="hijo">
4
</div>

</section>
Todas las siguientes propiedades CSS se colocan únicamente en la caja contenedora. Los hijos o elementos html ubicados dentro de la caja contenedora se verán afectados por estas propiedades.
flex-direction
row
row-reverse
column
column-reverse
justify-content
flex-start
flex-end
center
space-between
space-around
align-items
flex-start
flex-end
center
baseline
stretch
flex-wrap
nowrap
wrap
align-content
flex-start
flex-end
center
space-between
space-around
(align-content únicamente funciona cuando el contenido se divide en diferentes filas (flex-direction:row) o columnas (flex-direction:column) y la propiedad flex-wrap tiene un valor de wrap)