Thuộc tính flex-wrap

Thuộc tính flex-wrap thiết lập việc sắp xếp nhiều dòng các khối dọc theo trục chính. Được áp dụng cho phần tử cha của các khối flex. Là một phần của thuộc tính viết tắt flex-flow.

Cú pháp

bộ chọn {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Giá trị

Giá trị	Mô tả
`nowrap`	Chế độ một dòng - các khối được xếp thành một hàng.
`wrap`	Các khối được xếp thành nhiều dòng nếu không vừa trong một dòng.
`wrap-reverse`	Giống như `wrap`, nhưng các khối được xếp theo thứ tự ngược lại (đầu tiên là phần tử cuối, sau đó đến phần tử đầu).

Giá trị mặc định: nowrap.

Ví dụ . Giá trị wrap

Bây giờ các khối không vừa với container của chúng và sẽ được xếp thành nhiều dòng:

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

Ví dụ . Giá trị wrap-reverse

Và bây giờ thứ tự sắp xếp sẽ thay đổi thành ngược lại (hãy nhìn vào các số bên trong khối):

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

Ví dụ . Giá trị nowrap

Bây giờ các khối sẽ được sắp xếp ở chế độ một dòng (mặc định như vậy). Khi đó giá trị chiều rộng width cho các khối sẽ bị bỏ qua, nếu nó ngăn cản các khối vừa với phần tử cha. Hãy chú ý rằng các khối vừa với phần tử cha, nhưng chiều rộng thực tế của chúng không phải là 100px, như đã được thiết lập, mà là nhỏ hơn:

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

Ví dụ . Giá trị nowrap

Tuy nhiên, nếu các khối vừa với chiều rộng đã được thiết lập cho chúng - thì thuộc tính width sẽ không bị bỏ qua. Hãy giảm số lượng khối để tất cả chúng đều vừa:

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

Xem thêm

thuộc tính flex-direction,
thiết lập hướng của các trục cho khối flex
thuộc tính justify-content,
thiết lập căn chỉnh dọc theo trục chính
thuộc tính align-items,
thiết lập căn chỉnh dọc theo trục vuông góc
thuộc tính flex-flow,
viết tắt cho flex-direction và flex-wrap
thuộc tính order,
thiết lập thứ tự của các khối flex
thuộc tính align-self,
thiết lập căn chỉnh cho một khối riêng lẻ
thuộc tính flex-basis,
thiết lập kích thước cho một khối flex cụ thể
thuộc tính flex-grow,
thiết lập khả năng mở rộng của các khối flex
thuộc tính flex-shrink,
thiết lập khả năng co lại của các khối flex
thuộc tính flex,
viết tắt cho flex-grow, flex-shrink và flex-basis