Propriété flex-wrap

La propriété flex-wrap définit la disposition multiligne des blocs le long de l'axe principal. Elle s'applique à l'élément parent des blocs flex. Elle fait partie de la propriété raccourcie flex-flow.

Syntaxe

sélecteur {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Valeurs

Valeur	Description
`nowrap`	Mode monoligne - les blocs s'alignent sur une seule ligne.
`wrap`	Les blocs s'alignent sur plusieurs lignes s'ils ne tiennent pas sur une seule.
`wrap-reverse`	Identique à `wrap`, mais les blocs s'alignent dans l'ordre inverse (le dernier en premier, puis le premier).

Valeur par défaut : nowrap.

Exemple . Valeur wrap

Maintenant, les blocs ne tiennent pas dans leur conteneur et s'aligneront sur plusieurs lignes :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur wrap-reverse

Et maintenant, l'ordre de succession change à l'inverse (regardez les chiffres à l'intérieur des blocs) :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: wrap-reverse;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur nowrap

Maintenant, les blocs seront disposés en mode monoligne (comme par défaut). Dans ce cas, la valeur de largeur width pour les blocs sera ignorée, si elle empêche les blocs de tenir dans le parent. Veuillez noter que les blocs tiennent dans le parent, mais leur largeur réelle n'est pas de 100px, comme défini, mais moins :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Exemple . Valeur nowrap

Cependant, si les blocs tiennent avec la largeur qui leur est attribuée - alors la propriété width ne sera pas ignorée. Réduisons le nombre de blocs afin qu'ils tiennent tous :

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Voir aussi

la propriété flex-direction,
qui définit la direction des axes des blocs flex
la propriété justify-content,
qui définit l'alignement le long de l'axe principal
la propriété align-items,
qui définit l'alignement le long de l'axe transversal
la propriété flex-flow,
raccourci pour flex-direction et flex-wrap
la propriété order,
qui définit l'ordre des blocs flex
la propriété align-self,
qui définit l'alignement d'un seul bloc
la propriété flex-basis,
qui définit la taille d'un bloc flex spécifique
la propriété flex-grow,
qui définit l'expansion des blocs flex
la propriété flex-shrink,
qui définit la réductibilité des blocs flex
la propriété flex,
raccourci pour flex-grow, flex-shrink et flex-basis