Flexbox: Creando diseños flexibles con CSS3

entendiendo-flexbox-de-css3 CSS Flexible Box Layout o “Diseño con cajas Flexibles” como se denomina este modulo que intenta cambiar la forma de diseñar y generar contenidos totalmente adaptables a cualquier dispositivo.En este tutorial veremos las principales característica de estas propiedades es que nos van a permitir crear bloques de elementos conocidos como flex container en el que los contenidos que son hijos directos se comportaran de manera totalmente flexible, lo que conocemos como flex ítems y de esta forma vamos a poder cambiar sus posiciones, orden alineamiento y otras propiedades mas.

Lo más grande de esto es que es generado en CSS, creando estructuras básicas en HTML le podremos inyectar estas buenas características por medio de las hojas de estilos CSS y las propiedades FlexBox.

Para tener en cuenta, que solo vamos a ver las principales y las características básicas que componen este concepto Flexbox.

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.

tutorial-flexbox-css3-1

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.

display-flex

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:

flex-direction

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:

flex-wrap-flexbox

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.

justify-content-flexbox

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:

align-self-flexbox

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/

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

5 Respuestas

  1. Cristina dice:

    muy buen tuto! gracias por compartirlo!

  2. Ivan dice:

    Muy buena página, he estado revisando todos los tips de freelance y diseño web que tienes, excelente blog (:

  3. Cristian Geovanny dice:

    Excelente, muchas gracias voy aplicar estos conocimientos…. gracias de nuevo por compartir.

  4. Angel dice:

    Buen tutorial, felicitaciones por el curso de CSS3, me ha servido un montón,

  5. Rodrigo dice:

    Venga! Gracias 😀