{ . . . }

Guía visual para aprender Flexbox de CSS3

18 Comentarios

El modulo Flexbox Layout o como es llamado oficialmente CSS Flexible box Layout Module es el nuevo modelo de layout implementado en la especificación CSS3 para mejorar el alineamiento, dirección y orden de los elemento en el documento web, incluso cuando estos tienen algún tamaño aplicado dinámicamente o incluso desconocido. La principal característica del contenedor flexible es la capacidad de modificar la anchura o la altura de los elementos hijos para así llenar los espacios disponibles de la mejor manera posible adaptándose a cualquier dispositivo o a cualquier resolución. Muchos frontend encuentran este modelo FlexBox muy fácil de usar, porque el posicionamiento de los elementos es mucho más simple por lo tanto los diseños complejos se puede lograr con poco código css. Cabe decir que este Modelo de Layout fue presentado en el año 2009 y desde su salida su sintaxis ha cambiado en varias ocasiones sin embargo en septiembre del 2014 se ha establecido el último working draft o último borrador en la especificación la cual veremos en esta guía.En esta Guía visual para aprender Flexbox de CSS3 o Modelo de caja flexible no solo veremos las diferentes propiedades de flexión sino también cómo estas afectan al diseño de manera visual.

Conceptos básicos de Flexbox

Para entender bien este modelo de Layout debemos de entender algunos conceptos básicos. Primero la disposición flex debe de estar constituido por elementos padres e hijos, el padre será el contenedor Flexible “flex container” y los hijos inmediato serán los elementos Flexibles “flex item”.

flex layout

En la imagen anterior vemos como la W3C nos presenta gráficamente el modelo flexbox con sus fundamentos, puntos importantes y como está pensado para su funcionamiento.


¿Como empezamos con Flexbox?

Para comenzar a utilizar el modelo Flexbox lo primero que debemos de hacer es establecer la propiedad display con los valores flex o en su defecto inline-flex en el elemento padre. Esto lo convertirá en el flex container, y estará listo para contener elementos flexibles.

.flex-container {
    display: flex; /* ó inline-flex */
}

display: flex o display: inline-flex Son los valores de la propiedad display que necesitamos para configurar el contenedor principal y de esta manera todos sus hijos inmediatos se convertirán en elementos flexibles de forma automática.

La única diferencia que hay entre los valores flex y inline-flex es la disposición en la que esta se establece en el documento, al final es similar al establecimiento de display: block y display: inline-block.

  • flex: Hace que el elemento HTML sea un bloque. Los elementos del bloque generalmente comienzan una nueva línea y los elementos hermanos aparecen en diferentes líneas.
  • inline-flex: Hace que el elemento HTML sea un elemento en línea. Los elementos en línea no inician una nueva línea y sus hermanos pueden aparecer en la misma línea, pues estos ocupan solo el tamaño de su contenido.

Display Flex - Flexbox

El conjunto de propiedades que nos presenta la especificación CSS3 en cuanto al modulo Flexbox las podemos dividir en dos grupos, las propiedades para el elemento contenedor flex y las otras propiedades para los elementos hijos flexibles.


En los siguientes módulos veremos cada propiedad y cada valor estipulados en la especificación para el modulo css Flexible box Layout Module de CSS3. A continuación puedes ver el soporte del modulo con sus propiedades en los diferentes navegadores y versiones.

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Flex Direction

Esta propiedad especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección en el flex-conteiner. permite manejar el direccionamiento de los flex items, es decir cambiar el flujo normal de los elementos flexibles en el main axis. Esta propiedad tiene múltiples valores que nos van a permitir variar de todas las formas el direccionamiento de los elementos hijos flexibles. Sus valores son:

  • row (por defecto)
  • row-reverse
  • column
  • column-reverse

 flex-direction: row;

.flex-container {
    display: flex;
    flex-direction: row;
}

Con el valor row definimos el eje principal (main axis) del flex container horizontalmente de izquierda a derecha.

flex-direction row de Flexbox

Ver ejemplo

 flex-direction: row-reverse;

.flex-container {
    display: flex;
    flex-direction: row-reverse;
}

con el valor row-reverse (fila inversa) los flex items se apilan en el eje principal (main-axis) pero esta vez de derecha a izquierda, esta vez intercambiando el main-start y main-end respectivamente.

flex-direction row reverse de Flexbox

Ver ejemplo

 flex-direction: column;

.flex-container {
    display: flex;
    flex-direction: column;
}

con el valor column los flex items se apilan en una columna de arriba hacia abajo intercambiando los ejes principal y secundario: con column el main-axis vertical y el cross-axis es horizontal.

flex-direction column de Flexbox

Ver ejemplo

 flex-direction: column-reverse;

.flex-container {
    display: flex;
    flex-wrap: wrap-reverse;
}

con el valor column-reverse los flex items se apilan en una columna invertida, esta vez de abajo hacia arriba, intercambiando los ejes principales y secundario e intercambiando los puntos inicial y final (main-start y main-end).

flex-direction column-reverse de Flexbox

Ver ejemplo

Flex Wrap

El comportamiento inicial del contenedor flexible es poder mantener los flex items en su main axis o eje horizontal sin importar que las dimensiones de estos items cambien, pero hay ocasiones donde vamos a querer controlar este alineamiento y hacer que los elementos puedan saltar de línea para poder mantener una apariencia deseada en estos flex items. Con flex-wrap vamos a poder especificar las líneas del contenedor flexible, si queremos un contenedor de una línea o un contenedor multilínea para con sus flex-items. Sus valores son:

  • nowrap (por defecto)
  • wrap
  • wrap-reverse

 flex-wrap: nowrap;

.flex-container {
    display: flex;
    flex-wrap: nowrap;
}

Con este valor Los flex-items son distribuidos en una sola línea sin importar cuántos items sean, el contenedor tratará de de conservar sus ítems en su línea principal lo cual puede llevar a que se desborden del contenedor flexible si la suma de estos es mayor al ancho del contenedor. es decir el contenedor tendrá una sola linea principal (single-line).

flex-direction nowrap de Flexbox

Ver ejemplo

 flex-wrap: wrap;

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

Con este valor en la propiedad flex-wrap los elementos flexibles son colocados en varias líneas si el ancho de estos es superior al ancho del contenedor flexible. Esto es romper la línea del eje horizontal si les es necesario para así conservar las características de dimensiones de los flex items. Esto es de izquierda a derecha y de arriba a abajo. Esto vuelve al contenedor un elemento multi-línea.

flex-wrap wrap de Flexbox

Ver ejemplo

 flex-wrap: wrap-reverse;

.flex-container {
    display: flex;
    flex-wrap: wrap-reverse;
}

Con el valor wrap-reverse en la propiedad flex-wrap los flex items también pueden romper la línea del eje horizontal si les es necesario. Pero esta vez el orden es de izquierda a derecha y de abajo a arriba.

flex-wrap wrap-reverse de Flexbox

Ver ejemplo

Flex Flow

La propiedad flex-flow es simplemente la forma shorthand o forma rápida para las propiedades flex-direction y flex-wrap vistas anteriormente. Los valores que se aplican por defecto a esta propiedad son las mismas que se aplican a las propiedades que están actuando como valor. Sus valores son:

  • valores de la propiedad flex-direction
  • valores de la proiedad flex-wrap
.flex-container {
    display: flex;
    flex-flow: row-reverse wrap;
}
Ver ejemplo

Justify Content

Justify-content nos va a permitir alinear los elementos en el eje principal (main axis) del contenedor flexible, esto puede ser de forma vertical o horizontal según lo especifiquemos con flex-direction, también nos va a ayudar a distribuir los flex items en el contenedor flexible cuando los items no utilicen todo el espacio disponible en su eje principal actual. Esto es declarar la forma en que el navegador debe distribuir el espacio disponible entre los items flexibles. Sus valores son:

  • flex-start (por defecto)
  • flex-end
  • center
  • space-between
  • space-around

 justify-content: flex-start;

.flex-container {
    display: flex;
    justify-content: flex-start;
}

El valor flex-start de la propiedad justify-content lo que hace es alinear los flex items en el main start o comienzo del eje principal del contenedor flexible.

justify-content flex-start de Flexbox

Ver ejemplo

 justify-content: flex-end;

.flex-container {
    display: flex;
    justify-content: flex-end;
}

El valor flex-end de la propiedad justify-content lo que hace es alinear los flex items en el main end o final del contenedor flexible.

justify-content flex-end de Flexbox

Ver ejemplo

 justify-content: center;

.flex-container {
    display: flex;
    justify-content: center;
}

El valor flex-center lo que hace es alinear los flex items en el centro del main axis del contenedor flexible.

justify-content center de Flexbox

Ver ejemplo

 justify-content: space-between;

.flex-container {
    display: flex;
    justify-content: space-between;
}

space-between alinea los flex items a lo largo del main axis y va a hacer que los flex items se tomen la misma distancia o espaciado entre ellos en main axis del contenedor flexible quedando el primer y último elemento alineados con los bordes del contenedor en el eje principal.

justify-content space-between de Flexbox

Ver ejemplo

 justify-content: space-around;

.flex-container {
    display: flex;
    justify-content: space-around;
}

space-around alinea los flex items a lo largo del main axis y muestra los flex items con el mismo espacio de separación entre si, en diferencia del valor space-between los items primero y ultimo toman también el espaciado entre los bordes del contenedor flexible.

justify-content space-around de Flexbox

Ver ejemplo

Align Items

Align-items nos permite establecer la alineación que tendrán por defecto los flex item en el Cross axis (Eje secundario), es similar a la propiedad justify-content pero esta vez la dirección es perpendicular al main axis del contenedor flex. Sus valores son:

  • stretch (por defecto)
  • flex-start
  • flex-end
  • center
  • baseline

 align-items: stretch;

.flex-container {
    display: flex;
    align-items: stretch;
}

El valor stretch (estirar) para la propiedad align-items lo que va a hacer es tratar de llenar toda la altura (o anchura) desde el cross start hasta el cross end del contenedor flexible, siempre y cuando los items no tengan propiedades de dimensión definidas.

align-items stretch de Flexbox

Ver ejemplo

 align-items: flex-start;

.flex-container {
    display: flex;
    align-items: flex-start;
}

Con flex-start los flex items se apilan en el cross start del cross axis (eje secundario) del contenedor flexible, es decir en el inicio del eje transversal.

align-items flex-start de Flexbox

Ver ejemplo

 align-items: flex-end;

.flex-container {
    display: flex;
    align-items: flex-end;
}

Con flex-end los flex items se apilan al final del cross axis, esto es en el cross end del eje secundario del contenedor flexible.

align-items flex-end de Flexbox

Ver ejemplo

 align-items: center;

.flex-container {
    display: flex;
    align-items: center;
}

Con center los flex items se apilan en el centro del cross axis (eje secundario) del contenedor flexible, ósea en el eje transversal.

align-items center de Flexbox

Ver ejemplo

 align-items: baseline;

.flex-container {
    display: flex;
    align-items: baseline;
}

baseline alinea los flex items en el cross axis (eje secundario) del contenedor flexible basandose en las líneas base de cada item, esta se define en base a los texto de los flex ítems.

align-items baseline de Flexbox

Ver ejemplo

Align Content

Align-content ajusta las líneas dentro del flex container cuando hay espacio extra en el eje secundario. Esta propiedad sólo tiene efecto cuando el contenedor flexible es multi-línea, y esto solo lo hacemos por medio de los valores wrap y wrap-reverse de la propiedad flex-wrap. Sus valores son:

  • stretch (por defecto)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-arount

 align-content: stretch;

.flex-container {
    display: flex;
    align-content: stretch;
}

Con el valor stretch Las líneas se extienden para ocupar el espacio restante. El espacio libre es dividido equitativamente entre todas las líneas. En pocas palabras estira las líneas para que ocupen el eje transversal completo.

align-content stretch de Flexbox

Ver ejemplo

 align-content: flex-start;

.flex-container {
    display: flex;
    align-content: flex-start;
}

El valor flex-start lo que hace es ajustar las líneas desde el inicio del eje transversal (cross start) del contenedor flexible.

align-content flex-start de Flexbox

Ver ejemplo

 align-content: flex-end;

.flex-container {
    display: flex;
    align-content: flex-end;
}

El valor flex-end lo que hace es ajustar las líneas desde el final del eje transversal (cross start) del contenedor flexible.

align-content flex-end de Flexbox

Ver ejemplo

 align-content: center;

.flex-container {
    display: flex;
    align-content: center;
}

Con el valor center se ajustan las líneas alrededor del centro del eje transversal.

align-content center de Flexbox

Ver ejemplo

 align-content: space-between;

.flex-container {
    display: flex;
    align-content: space-between;
}

space-between en la propiedad align-content va a distribuir las líneas a lo largo del eje transversal, de principio a fin (desde el cross start hasta el cross end).

align-content space-between de Flexbox

Ver ejemplo

 align-content: space-around;

.flex-container {
    display: flex;
    align-content: space-around;
}

space-around en la propiedad align-content va a distribuir las líneas a lo largo del eje transversal, de principio a fin (desde el cross start hasta el cross end) pero esta vez el primero y último item toman también el espaciado entre los bordes del contenedor flexible.

align-content space-around de Flexbox

Ver ejemplo

Order

La propiedad order nos ayuda a especificar el orden para disponer los elementos en su contenedor flexible. Los elementos se dispondran en orden ascendente según el valor de la propiedad order. Los elementos con el mismo valor de order se dispondrán en el orden en el cual aparecen en el DOM.

 order: 0;

.flex-item-1 {
    order: 3;
}
.flex-item-2 {
    order: 0;
}
.flex-item-3 {
    order: 1;
}
.flex-item-4 {
    order: 2;
}

Como vimos anteriormente con el valor orden vamos a poder ordenar de forma individual los ítems según el número de orden que le demos.
El valor por defecto e inicial es 0.

flex-order de Flexbox

Ver ejemplo

Flex Grow

flex-grow especifica el factor de crecimiento del flex items, podemos en su valor determinar hasta que punto el flex item crecerá en relación al resto de ítems que se distribuyen el espacio disponible dentro del contenedor flexible.

El valor por defecto e inicial es 0. (Los números negativos no son válidos)

 flex-grow: 0;

.flex-item-1 {
    flex-grow: 1;
}
.flex-item-2 {
    flex-grow: 1;
}
.flex-item-3 {
    flex-grow: 1;
}
.flex-item-4 {
    flex-grow: 1;
}

Si todos los flex items tienen el mismo valor de flex-grow los ítems tendrán el mismo tamaño y ocuparan todo el espacio disponible brindado por su contenedor flexible. Para saber el valor dado a cada ítem como factor de crecimiento solo debemos de hacer una suma consecutiva con los valores de flex-grow de cada ítem y dividirlo por el valor disponible en el contenedor flexible.

flex-grow de Flexbox

En este caso el primer elemento flex ocupa más espacio en relación con el tamaño de los otros flex ítems debido a que tiene mayor factor de crecimiento, para determinar cuánto crece en relación a los demás ítems debemos de multiplicar el valor asignado a cada flex items por el factor de crecimiento aplicado en la propiedad.

flex-grow de Flexbox

Ver ejemplo

Flex Shrink

flex-shirnk permite especificar el valores de encogimiento o contracción en los elementos flexibles. Es decir, todo lo contrario a flex-grow. Con el valor indicado en números especificaremos cuánto se reducirá el item con respecto al resto de ítems dentro del contenedor flexible cuanto el espacio en este es negativo, osea cuando la suma total de los flex items supera el espacio disponible en el flex container.

El valor por defecto e inicial es 1. (Los números negativos no son válidos)

 flex-shrink: 1;

.flex-item-1 {
    flex-shrink: 1;
}
.flex-item-2 {
    flex-shrink: 2;
}
.flex-item-3 {
    flex-shrink: 1;
}
.flex-item-4 {
    flex-shrink: 1;
}

flex-shrink de Flexbox

Por medio de la propiedad flex-shrink todos los elementos flexibles se pueden reducir, pero si lo ponemos a cero (0) los flex items no se reducirán, estos van a mantener su tamaño original.

Ver ejemplo

Flex Shrink

flex-basis Permite establecer el tamaño base del main size del flex item que de forma predeterminada actuaria como el width del elemento flexible. Los valores que podemos aplicar son los mismo que usamos para las propiedades tradicionales width y height.

El valor por defecto e inicial es auto.

 flex-basis: auto;

.flex-item-1 {
    flex-basis: auto;
}
.flex-item-2 {
    flex-basis: auto;
}
.flex-item-3 {
    flex-basis: 150px;
}
.flex-item-4 {
    flex-basis: auto;
}

flex-basis de Flexbox

Ver ejemplo

Flex

La propiedad flex es el método shorthand o forma rápida para especificar en una sola propiedades los valores de flex-grow, flex-shrink y flex-basis.

Los valores por defecto son 0 | 1 | auto.

.flex-item {
    flex: flex-grow flex-shrink flex-basis;
}

Esta propiedad especifica 3 valores para controlar la flexibilidad de los elementos flexibles. Estos se pueden especificar de las siguientes forma:

flex: 2 2 10%; /* Tres valores: flex-grow | flex-shrink | flex-basis */
flex: 1 30px; /* Especificamos dos valores: flex-grow | flex-basis */
flex: 2 2; /* Dos valores sin unidades: flex-grow | flex-shrink */
flex: auto; /* Especificamos los valores por defecto de cada propiedad */
flex: none; /* Anulamos las características de las propiedades: (0 0 auto)*/

Align Self

La propiedad align-self nos permite especificar la alineación de algún flex item en particular dentro del contenedor flexible en el cross axis o eje secundario.

 align-self: auto;

.flex-item-1 {
    flex-shrink: 1;
}
.flex-item-2 {
    flex-shrink: 2;
}
.flex-item-3 {
    flex-shrink: 1;
}
.flex-item-4 {
    flex-shrink: 1;
}

Sus valores son:

  • auto (por defecto)
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

Como vemos los valores son los mismo que hemos visto anteriormente aplicados a otras propiedades solo que cuando se aplican a esta propiedad align-self actúan solamente en los flex items seleccionados dentro del contenedor flexible.

align-self de Flexbox

Ver ejemplo

18
Comentar

avatar
16 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
16 Comment authors
Johansomariavjosecatlike YucatecaLuis Miguel Recent comment authors
Nuevos Antiguos Más votados
Felipe
Felipe

hola, esta muy explicado esta guia para aprender flexbox. Gracias master.

emiligenevila
emiligenevila

El código de ejemplo de Flex-Flow creo que está equivocado.
Donde dice:
flex-wrap: row-reverse wrap;
¿no debería decir:?
flex-flow: row-reverse wrap;

David González
David González

Fantástico aporte!

maraijo
maraijo

El link del ejemplo “align-items: baseline ” esta roto.

Victor Marquez
Victor Marquez

Estoy buscando información sobre el tema de los flexbox, he visto alguno y he escuchado observado muchos vídeos, pero en realidad la información que presentan aquí es estupenda, he aprendido muchísimo gracias ha este material. Felicitaciones !!!

Jose luis
Jose luis

Muy claro,, gracias por compartir esta info. Buen blog

Yorvin Silva
Yorvin Silva

Muy Muy Muy bueno gracias hermano

Juan Carlos
Juan Carlos

Excelente guía en español para aprender Flexbox, gracias por tomar el tiempo para realizarla.

Jose Luis Lopez
Jose Luis Lopez

buena guía, gracias por compartir

lenin
lenin

muuy bueno y util gracias por el tiempo que te das para podenos enseñar cosas como estas 😉

catlike Yucateca
catlike Yucateca

Muchas gracias por la guía. ¡Está genial!
¿Podrían revisar el enlace del ejemplo para align-self?

jose
jose

gracias por la información clara y sencilla de entender.

mariav
mariav

la image de space between está repetida

mariav
mariav

la imagen de space between está repetida

Luis Miguel
Luis Miguel

Excelente aporte

Daniel Fontanes
Daniel Fontanes

Estaba mejor como lo tenías la otra vez que no había que andar a abrir pestañas y era usar el scroll y dar un espacio a las imágenes a la que mas convenía, pero gran trabajo igualmente 🙂