Flexbox

El módulo de flexbox de CSS es una nueva forma de organizar, distribuir y alinear
el layout de elementos html, permitiéndoles incluso ocupar espacio de contenedores con tamaño
desconocido o variable (de ahí lo "flexible").


La idea básica de flexbox es darle al contenedor la
capacidad de distribuir su espacio sobrante entre cada uno de los items que contiene,
permitiéndoles crecer o achicarse según corresponda el caso.



Las bases


display: flex


Es la propiedad que le vamos a agregar al contenedor para volverlo un contenedor flexible.

.container {
 display: flex;
}



flex-direction


Establece la dirección principal en la que se van a colocar los elementos
dentro del contenedor.


row

Posiciona los elementos a lo largo del eje X, en fila, horizontalmente:

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



1
2
3
4

row-reverse

Posiciona todos los elementos a lo largo del eje X, pero de atrás para adelante:

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



1
2
3
4

column

Posiciona todos los elementos a lo largo del eje Y, verticalmente, como en una columna:

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



1
2
3
4

column-reverse

Posiciona todos los elementos a lo largo del eje Y, pero de atrás para adelante:

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



1
2
3
4



order


Es una propiedad que se le da a los elementos dentro de un contenedor flexible
para cambiar el orden en que se ubican. Se indica simplemente con un número.
Por defecto todos tienen orden 0. Si dos elementos tienen el mismo orden, se distribuyen según el html.

.item-2 {
 order: 2;
}

1
2
3
4


.item-2 {
 order: 3;
}
.item-3 {
 order: 2;
}

1
2
3
4



flex-basis


Especifica el tamaño inicial del item, antes de que el espacio restante sea distribuido. Cuando se omite, se pone en 0.
Si se utiliza la palabra auto, tomará como referencia el contenido del elemento, ya sea el ancho o el alto,
dependiendo de la orientación del contenedor.


.item-1 {
 flex-basis: 400px;
} .item-2 {
 flex-basis: 100px;
}

1
2


.item {
 flex-basis: auto;
}



short
looooooooooooooooong
short



flex-grow


Indica cuánto más espacio a tomar del espacio libre restante va a ocupar un elemento con respecto a otros. Por defecto es 0,
es decir, no va a tomar ningún espacio libre. Si todos los elementos tienen un valor de 1, el espacio a ocupar se distribuye equitativamente entre ellos.
Si uno de ellos toma el valor de 2, tomará el doble de estos.




.item-2 {
 flex-grow: 2;
}



1
2
3

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

1
2
3



flex-shrink


Indica hasta cuánto puede reducirse un elemento proporcionalmente con respecto a otros. Por defecto es 1.
Si todos los elementos tienen un valor de 1, a medida que el contenedor se achica se reducirán equitativamente.
Si uno de ellos toma el valor de 2, se reducirá a la mitad de estos.




.item-2 {
 flex-shrink: 2;
}



1
2

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

1
2
3



flex-wrap


Le indica al contenedor si puede distribuir los elementos en más de una línea a medida que se va a achicando.
El valor por defecto es no-wrap


.container {
 flex-wrap: wrap;
}


1
2
3
4
5
6
7
8
9



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


1
2
3
4
5
6
7
8
9






Subiendo la apuesta



justify-content


Le indica al contenedor como tiene distribuir los elementos cuando hay espacio libre de sobra.

flex-start

Posiciona los elementos al comienzo del contenedor (por defecto).

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

1
2
3

flex-end

Posiciona los elementos al final del contenedor.

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

1
2
3

center

Posiciona los elementos en el medio del contenedor.




.container {
 justify-content: center;
}

1
2
3

space-around

Les da a todos los elementos la misma distancia de separación a ambos lados.
Los items de los extremos están más cerca del borde que de los items,
porque entre el borde y ellos hay una distancia de separación,
y entre ellos y los otros items, dos, una por cada uno.

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

1
2
3

space-between

Posiciona un elemento al principio y otro al final del contenedor,
y distribuye los restantes entre estos dos, con espacio equitativo
entre ellos.

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

1
2
3

space-evenly

Posiciona los elementos de forma tal que el espacio entre ellos
y entre los bordes es el mismo.


.container {
 justify-content: space-evenly;
}

1
2
3




align-items


Definen cómo los items se alinean en el eje perpendicular al eje del contenedor.

flex-start

Posiciona los elementos al comienzo de la línea perpendicular al eje del contenedor.

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

1
2
3

flex-end

Posiciona los elementos al final de la línea perpendicular al eje del contenedor.

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

1
2
3

center

Posiciona los elementos en el medio de la línea perpendicular al eje del contenedor.


.container {
 align-items: center;
}

1
2
3

stretch

Estira los elementos para que llenen todo el espacio posible a través de la
perpendicular al eje del contenedor (por defecto).

.container {
 align-items: stretch;
}

1
2
3

baseline

Los elementos se distribuyen de forma tal que
la base de línea del contenido de ellos queda alineado.

.container {
 align-items: baseline;
}

1
2
3


align-content


Funciona como justify-content, pero distribuyendo el espacio que hay
a lo largo del eje perpendicular al eje contenedor. Debe usarse en combinación con flex-wrap,
ya que no funciona cuando el contenedor tiene una sola línea de elementos.

flex-start

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

1
2
3
4
5
6

flex-end

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

1
2
3
4
5
6

center

.container {
 align-content: center;
}

1
2
3
4
5
6

space-around

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

1
2
3
4
5
6

space-between

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

1
2
3
4
5
6

stretch


.container {
 align-content: stretch;
}

1
2
3
4
5
6