Está en la página 1de 19

Flexbox de CSS – Guía visual

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”.

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 */
}
CSS

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.

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.

Propiedades del Flex Container

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;

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

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

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-container {
display: flex;
flex-direction: row-reverse;
}

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-container {
display: flex;
flex-direction: column;
}
flex-direction: column-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-container {
display: flex;
flex-wrap: wrap-reverse;
}

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;

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-container {
display: flex;
flex-wrap: nowrap;
}

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-container {
display: flex;
flex-wrap: wrap;
}

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-container {
display: flex;
flex-wrap: wrap-reverse;
}
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;
}

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;

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.

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

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.

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

justify-content: center;

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

.flex-container {
display: flex;
justify-content: center;
}
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.

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

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.

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

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;

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.

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

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.

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

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.

.flex-container {
display: flex;
align-items: flex-end;
}
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.

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

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.

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

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;

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.

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

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.

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

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.
.flex-container {
display: flex;
align-content: flex-end;
}

align-content: center;

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

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

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).

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

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.

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

Propiedades de los Flex Items

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;
}
CSS

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 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;
}
CSS

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.

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 Shrink

flex-shirnk permite especificar el valor 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;
}

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.

Flex Basis

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;
}

lex

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;
}
CSS

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;
}
CSS

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.