PDF de programación - Cajas flexibles o Flex Boxes

Cajas Flexibles o Flex Boxes

Estableciendo el contenedor Flexible:
Para comenzar a trabajar con las propiedades Flexbox, primero tenemos que establecer el contenedor
Flexible o “Flex Container”, para que todos los contenidos interiores, los hijos directos se comporten
flexiblemente.

Esto lo hacemos con la propiedad display y el valor Flex. Display: flex;

para entender veamos la siguiente imagen.

En el anterior grafico podeos comprender la forma en que funciona este concepto flexbox y el
comportamiento de sus componente. Veamos:
Flex container: Contenedor principal flexible
Flex items: Son los hijos directos del flex container y automaticamente se vuelven items flexibles.
Main axis: Es el eje principal que atraviesa el elemento flex container horizontalmente y va de
izquierda a derecha en su flujo normal comenzando con start y terminando en el end main.
Cross axis: Es el eje vertical que atraviesa el elemento, el eje transversal y también consta de un start y
end, va de arriba a abajo del elemento.

Utilizamos la propiedad display, ya sea flex o inline-flex para transformar los elementos dentro del flex
container a flex ítems, utilizamos flex para aplicárselo a los elementos de nivel bloque y inline-flex a
los de nivel inline.

Controlando el flujo en en Flex Container
flex-direction
Con flex-direction, vamos a poder establecer la dirección de los flex ítems en el eje principal dentro del
flex container. Podemos cambiar su orden, colocarlos en disposición de columnas e invertirlos en
cualquier eje. Veamos:

row: Es el valor por defecto y tiene la misma orientación establecida originalmente en el main exis o
eje principal.
row-reverse: igual a row, la diferencia es que los flex ítem del start y end “comienzo y final” se
intercambian.
column: los elementos se disponen en bloques y su alineamiento es el cross axis “eje transversal” y su
orden es de start a end cross es decir, de arriba abajo.

column-reverse: igual a column, la diferencia es que los flex ítem del start y end “comienzo y final” se
intercambian.

flex-wrap
A veces cuando utilizamos las características Flexbox de CSS3 y el contenido es ejecutado en un
viewport pequeño el contenido que es flexible tratara de ajustarse y algunas veces este tendera a salirse
de su contendor principal, de su flex container.

Con flex-wrap vamos a controlar esta situación, si el contenido es mucho para mostrarse en una sola
línea, en el eje principal, esta propiedad utilizara el eje transversal para reordenar los ítems flexibles.
Veamos:

nowrap: este es el valor que se aplica por defecto, y indica que los elementos flexibles no se ajusten
wrap: Este valor es para decirle a los ítems que se organizen si es necesario, si no caben en el
contenedor flexible.
wrap-reverse: igual que el valor wrap, solo que esta vez los flex ítems se organizaran en orden
inverso.

justify-content
Esta propiedad nos va a permitir controlar la alineación de los elementos flexibles en el main axis o eje
principal.

flex-star: empujara los flex ítems al inicio del main axis o eje principal.
flex-end: empujara los flex ítems al final del main axis.
center: centrara los ítems dejando los espacios de los extremos iguales.
flex-between: distribuye los flex ítems uniformemente a lo largo del main axis teniendo en cuenta su
punto de partida, la posición start.
space-around: distribuye los ítem uniformemente, pero esta vez teniendo en cuenta los espacios y sus
el tamaño que hay en los extremos y entre cada flex ítems.

align-self
Esta propiedad junto a sus valores nos va a permitir alinear los flex ítems en el cross axis, o eje
transversal. Veamos:

flex-start: Coloca los flex ítems en el principio del eje transversal, en el start.
flex-end: Coloca los flex ítems en el final del eje transversal, en el end.
center: Coloca los flex ítems en el centro del eje transversal.
stretch: Alinea los flex ítem y les iguala su altura llevándolos desde el start hasta el and del cross axis o
eje transversal.
baseline: da alineamiento a los flex ítems teniendo como base la primera línea del texto de cada ítem.
Cabe decir que las propiedades align-items y align-self son un poco similares. La propiedad align-
items controla la alineación la alineación de los ítems en conjunto y se aplica al contenedor y la
propiedad align-self se aplica a los flex ítems individualmente. Ambos aceptan los mismos valores.

Como he dicho antes, solo hemos visto las principales propiedades de las propiedades Flexbox.

Para más información: http://dev.w3.org/csswg/css-flexbox/