Flexbox proporciona una forma más eficiente de alinear y distribuir items dentro de un contenedor de acuerdo a sus ejes

Dentro de los componentes del flex tenemos:

  • - Flex container: Contenedor
  • - Flex Items: elements
  • - Ejes: Que son main axis (eje principal) y cross axis (eje secundario). Y para complementar main size, cross size, main start, main end, cross start, cross end

Flex container

Para utilizar flexbox siempre se debe definir si el padre contenedor trabajará en bloque o línea

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

flex-direction

Permite establecer la dirección del eje principal. Su valor predeterminado es flex-direction: row. Pero existen otras opciones:

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

Ejemplo: flex-direction: column

1
2
3
4

justify-content

Alinea los items en el eje principal que estan dentro de un contenedor. El valor por defecto es justify-content: flex-start. Otras opciones:

.container { justify-content: flex-end; }
1
2
3
4
.container { justify-content: center; }
1
2
3
4

Los elements se distribuyen uniformemente con igual espacio a su alrededor.

.container { justify-content: space-around; }
1
2
3
4
1
2

Los elements se distribuyen uniformemente entre elementos. Pero el primer elemento se coloca al inicio, el último elemento al final

.container { justify-content: space-between; }
1
2
3
4
1
2
.container { justify-content: space-evenly; }

Los elements se distribuyen de modo que el espacio entre estos sea igual.

1
2
3
4

align-items

Alinea los items en el eje secundario. El valor por defecto es align-items: flex-start. Otras opciones:

.container { align-items: center; }
1
2
3
4
.container { align-items: flex-end; }
1
2
3
4

Se estira los elements para llenar el contenedor en el eje secundario. Por lo que los elements no deben tener un tamaño definido en el eje secundario.

.container { align-items: stretch; }
1
2
3
4
.container { flex-direction: column ;  } .container { align-items: stretch; }
1
2
3
4

Se alinea según la base del contenido de los ítems.

.container { align-items: baseline; }
1
2
3
4

flex-wrap

Su valor predeterminado de flex-wrap es nowrap

- wrap: Permite determinar si puede saltar de línea los elements si no encaja en una línea, respetando los tamaños de los items.

- nowrap: No salta de línea pero redimensiona los items haciendo encajar en una línea.

- wrap-reverse: Las filas son opuestas más no los items.

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

Ejemplo: flex-wrap: wrap

1
2
3
4

flex-flow

Es el shorthand de flex-direction y flex-wrap. El valor por defecto es flex-flow: row nowrap

Ejemplo: flex-flow: row wrap-reverse

1
2
3
4

align-content

Alinea las líneas, es decir que utilizamos la propiedad flex-wrap: wrap para que podamos tener varias líneas y los elements tomen su ancho establecido. El valor por defecto es align-content: flex-start

.container { align-content: flex-end; }
1
2
3
4
.container { align-content: center; }
1
2
3
.container { align-content: space-around; }
1
2
3

flex-grow

Se le asigna a los elementos permitiendo que estos crezcan hasta ocupar todo el espacio disponible en el eje principal

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

Adicionales

* Video recomendado para entender Flexbox: Link

* Guía de Flexbox completa en inglés: Link

* Para experimentar opciones de Flexbox: Link

* Juego para aprender Flexbox: Link