Contenedores Flex CSS

Un contenedor se vuelve flexible al establecer la propiedad display con el valor flex.

.contenedor-flex {
  display: flex;
}

Las propiedades para los contenedores Flex son:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

La propiedad flex-direction

La propiedad flex-direction establece al contenedor en que dirección debe apilar los elementos flex.

Los valores de la propiedad flex-direcction son:

  • row
  • row-reverse
  • column
  • column-reverse

Para fines de visualización del ejemplo especificamos también las propiedades del los elementos flex:

.contenedor-flex {
  display: flex;
  flex-direction: row;
}
.contenedor-flex > div {
  background-color: #f1f1f1;
  width: 63px;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

El valor row apila los elementos flex horizontalmente, de izquerda hacia la derecha. este el valor predterminado:

1
2
3

El valor row-reverse apila los elementos flex horizontalmente, pero de derecha hacia la izquierda.

1
2
3

El valor column apila los elementos flex verticalmente, de arriba hacia abajo:

1
2
3

El valor column-reverse apila los elementos flex verticalmente, pero de abajo hacia arriba:

1
2
3

La propiedad flex-wrap

La propiedad flex-wrap establece si el elemento flex debe ajustarse o no.

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

El siguiente ejemplo tiene 12 elementos flex para demostrar el comportamiento de la propiedad flex-wrap.

El valor wrap establece que el elemento flex se ajustará si es necesario:

1
2
3
4
5
6
7
8
9

El valor wrap-reverse establece que el elemento flex se ajustará si es necesario, pero en orden inverso:

1
2
3
4
5
6
7
8
9

El valor nowrap establece que el elemento flex no será ajustado, este es el valor por defecto:

1
2
3
4
5
6
7
8
9

La propiedad flex-flow

La propiedad flex-flow es una propiedad abreviada para establecer los valores tanto de flex-direction como de flex-wrap:

.contenedor-flex {
  display: flex;
  flex-flow: row wrap;
}

Muestra:

1
2
3
4
5
6
7
8
9

La propiedad justify-content

La propiedad justify-content es utilizado para alinear o justicar horizontalmente los elementos flex.

El valor center alinea los elementos flex en el centro del contenedor:

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

Muestra:

1
2
3

El valor flex-start alinea los elementos flex al inicio del contenedor, este es el valor por defecto:

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

Muestra:

1
2
3

El valor flex-end alinea los elementos flex al final del contenedor:

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

Muestra:

1
2
3

El valor space-around muestra los elementos flex con espacio antes entre y despues de las líneas:

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

Muestra:

1
2
3

El valor space-between muestra los elementos flex con espacio entre las líneas:

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

Muestra:

1
2
3

La propiedad align-items

La propiedead align-items alinea (en sentido verticalmente) los elemetnos flex.

Para fines de mostrar el compartamiento de esta propiedad, establecemos los siguientes contenedores con una altura de 150 pixeles.

El valor center alinea los elementos flex en medio de un contenedor:

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

Muestra:

1
2
3

El valor flex-start alinea los elementos flex en lo alto del contenedor:

1
2
3

El valor flex-end alinea los elementos flex en lo bajo del contenedor:

1
2
3

El valor stretch estira los elementos flex para llenar el contenedor:

1
2
3

El valor baseline alinea los elementos como su línea base:

1
2
3

Nota: Para fines de mostrar el comportamiento de la propiedad baseline, se modifica el tamaño de letra para cada elemento flex.

La propiedad align-content

La propiedad align-content es usada para alinear las líneas de los elementos flex.

Para fines de mostrar el cortamiento de la propiedad align-content se establece el contenedor con un alto de 400 pixeles, con la propiedad flex-wrap.

.contenedor-flex {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: space-between;
  background-color: DodgerBlue;
}
.contenedor-flex > div { background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

El valor space-between muestra las líneas flex con espaciado igual entre ellas:

1
2
3
4
5
6
7
8
9
10
11
12

El valor space-around muestra las líneas flex con espaciado antes, entre y después de ellas:

1
2
3
4
5
6
7
8
9
10
11
12

El valor stretch estira las líneas flex para ocupar el espacio restante, este es el valor por defecto:

1
2
3
4
5
6
7
8
9
10
11
12

El valor center muestra las líneas en medio del contenedor:

1
2
3
4
5
6
7
8
9
10
11
12

El valor flex-start muestra las líneas al inicio del contenedor:

1
2
3
4
5
6
7
8
9
10
11
12

El valor flex-end muestra las líneas al final del contenedor:

1
2
3
4
5
6
7
8
9
10
11
12

Centrado Perfecto

En el siguiente ejemplo, se resuelve un problema muy común: un centrado perfecto:

Solución: Establecer las propiedades justify-content y align-item en center, y el elemento flex será centrado perfectamente:

.contenedor-flex {
  display: flex;
  height: 400px;
  justify-content: center;
  align-items: center;
}

Muestra:

1