flex-wrap | Css

 

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 a wrap, pero en este caso, la dirección del envoltorio es de abajo a arriba.

Ejemplo

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

Artículos

Manual CSS

Aprende más sobre CSS consultando online o descargando nuestro manual.

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?