Descripción
La propiedad flex-wrap
en CSS se utiliza para especificar si los elementos flexibles deben envolverse o no en varias líneas dentro de un contenedor flexible cuando no hay suficiente espacio en una sola línea.
Sintaxis
flex-wrap : nowrap | wrap | wrap-reverse
Valores
La propiedad flex-wrap
admite varios valores que pueden controlar cómo se maneja el desbordamiento de contenido en un contenedor flex. Aquí están los valores que usted puede utilizar:
nowrap
: Este es el valor por defecto. Con este valor, todos los elementos flex se ubican en una única línea, independientemente de cuántos elementos haya. Si hay demasiados para caber en la línea, se reducirá su tamaño para hacer espacio.wrap
: Con este valor, los elementos se envolverán en múltiples líneas si no hay suficiente espacio para todos en una sola línea. La dirección del envoltorio es de arriba a abajo.wrap-reverse
: Este valor funciona de manera similar awrap
, pero en este caso, la dirección del envoltorio es de abajo a arriba.
Ejemplo
.container {
display: flex;
flex-wrap: wrap;
}