The flex-wrap property

The flex-wrap property specifies a multi-line arrangement of blocks along the main axis. It applies to the parent element for flex blocks. It is included in the shorthand flex-flow property.

Syntax

selector {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Values

Value	Description
`nowrap`	Single-line mode - blocks are lined up in one line.
`wrap`	Blocks are lined up in several lines if they do not fit into one.
`wrap-reverse`	Same as `wrap`, but the blocks are arranged in a different order (last block first, then first one).

Default value: nowrap.

Example . The wrap value

Now the blocks do not fit into their container and will line up in several lines:

<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;
}

Example . The wrap-reverse value

And now the order will be reversed (look at numbers inside the blocks):

<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;
}

Example . The nowrap value

Now the blocks will be arranged in single-line mode (this is the default). In this case, the width value for blocks will be ignored if it prevents the blocks from fitting into the parent. Please note that the blocks fit into the parent, but their actual width is not 100px, as they were given, but less:

<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;
}

Example . The nowrap value

However, if the blocks fit at the width they are given, then the width property will not be ignored. Let's reduce the number of blocks so that they all fit:

<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;
}

The flex-wrap property

Syntax

Values

Example . The wrap value

Example . The wrap-reverse value

Example . The nowrap value

Example . The nowrap value

See also