Flexbox flex-wrap – nowrap wrap, wrap-reverse | CSS

flex-wrap

Es una propiedad del flexbox que nos ayuda con la distribución de los elementos en el contenedor.
A continuación veremos 3 valores de flex-wrap.

1. nowrap

El valor nowrap es el valor por defecto o inicial de flex-wrap, hace que los elementos o ítems entren todos en una sola linea comprimiéndolos si son demasiados elementos,
nowrap también puede causar un desborde si hay demasiados elementos en el contenedor.

El archivo con los ejemplos lo pueden descargar de github.

Ejemplo:

En este ejemplo hay 10 imágenes de 100px x 80px dentro de un contenedor de 400px x 600px.

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

2. wrap

Sabemos que flexbox al ser unidimensional trabaja en una sola linea; sin embargo es posible distribuir los ítems o elementos en muchas líneas más.

La propiedad flex-wrap reparte los elementos en varias lineas y ademas hace que los elementos no se vean tan comprimidos ya que al tener mayor espacio incrementa un poco el tamaño si es necesario.

Ejemplo:

Si tienes varios elementos en un contenedor flexbox y están sobrepasando el limite del tamaño del contenedor usamos flex-wrap:wrap para repartir o distribuir estos elementos en las más lineas.

.container-01 {
   width: 400px;
   height: 600px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-content: center;
   color: white;
   background: #f2ebfd;
}

3. wrap-reverse

El valor wrap-reverce es similar a wrap, con una pequeña variante la cual ordena los elementos o ítems de forma opuesta a wrap.

Ejemplo:

Si wrap ordena los elementos de forma descendente osea del 1 al 10 por ejemplo; wrap-reverse lo hace de forma ascendente del 10 al 1.

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