⇪

La propiedad flex-wrap

facebook-svg gplus-svg twitter-svg

La propiedad flex-wrap es una propiedad del contenedor flex y especifica si puede haber un cambio de línea ( wrap ) o no ( nowrap ). El valor por defecto es nowrap. La propiedad flex-wrap puede tomar una de estas valores:

.contenedor { flex-wrap: nowrap | wrap | wrap-reverse; }

nowrap ( el valor por defecto ): los elementos flex aparecen en una sola línea. En ciertas circumstancias los elementos flex aparecen redimensionados para que puedan acomodarse dentro del contenedor flex. En otras circumstancias el contenedor flex puede desbordar ( overflow ).

wrap: indica al CSS que puede haber cambio de línea.  Los elementos flex aparecen colocados en varias líneas.

wrap-reverse: igual que wrap pero las líneas de elementos flex aparecen ordenadas en sentido contrario.

flex align-content

flex-wrap: nowrap (el valor por defecto)

Si flex-wrap: nowrap, no puede haber cambio de línea y los elementos flex aparecen en una sola línea. En ciertas circumstancias los elementos flex aparecen redimensionados para que puedan acomodarse dentro del contenedor flex. En otras circumstancias el contenedor flex puede desbordar ( overflow ).

.flex-container.nowrap{
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
}

.flex-container{
	width: 250px;
	height: 140px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
}
.flex-item{
	display: inherit;
	width:50px;
	height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-item p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;  
	margin:0; }

.flex-container.nowrap{
   -webkit-flex-wrap: nowrap;
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
}

   
1

   
2

   
3

   
4

   
5

   
6

   
7

1

2

3

4

5

6

7

flex-wrap: wrap

Si flex-wrap: wrap, el CSS entiende que puede haber un cambio de línea. Los elementos flex aparecen colocados en varias líneas, tantas como sea necesario.

.flex-container.wrap{
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.flex-container{
	width: 250px;
	height: 140px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
}
.flex-item{
	display: inherit;
	width:50px;
	height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-item p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;  
	margin:0; }

.flex-container.wrap{
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
styleCss 

   
1

   
2

   
3

   
4

   
5

   
6

   
7

1

2

3

4

5

6

7

flex-wrap: wrap-reverse

Si flex-wrap: wrap-reverse, el CSS entiende que puede haber un cambio de línea. Los elementos flex aparecen colocados en varias líneas, pero en orden contrario.

.flex-container.wrap-reverse{
   -webkit-flex-wrap: wrap-reverse;
   -ms-flex-wrap: wrap-reverse;
   flex-wrap: wrap-reverse;
}

.flex-container{
	width: 250px;
	height: 140px;
	padding:5px;
	margin: 10px auto;
	background-color:#124678;
	display:-webkit-flex; 
	display: -ms-flexbox; 
	display: flex;
}
.flex-item{
	display: inherit;
	width:50px;
	height:50px;
	background-color:#ccc;
	margin:5px;
}
.flex-item p{
	width:100%; 
	text-align:center; 
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;  
	margin:0; }

.flex-container.wrap-reverse{
   -webkit-flex-wrap: wrap-reverse;
   -ms-flex-wrap: wrap-reverse;
   flex-wrap: wrap-reverse;
}

   
1

   
2

   
3

   
4

   
5

   
6

   
7

1

2

3

4

5

6

7

La propiedad flex-flow

La propiedad flex-flow es una propiedad del contenedor flex.

Para que podamos escribir menos código, el CSS nos permite abreviar las dos propiedades: flex-direction y flex-wrap ( opcional ) en una sola: flex-flow. El valor por defecto es row nowrap.

.contenedor { flex-flow: flex-direction [flex-wrap]; } 

.flex-container{ 
   -webkit-flex-flow: row nowrap;
   -ms-flex-flow: row nowrap;
   flex-flow: row nowrap; 
}

Entender flexbox de manera interactiva.