Thuộc tính flex-flow

Thuộc tính flex-flow là cách viết tắt cho flex-direction và flex-wrap. Giá trị mặc định: row nowrap. Được áp dụng cho phần tử cha của các khối flex.

Cú pháp

bộ_chọn {
	flex-flow: hướng_trục_chính bao_bọc;
}

Thứ tự của giá trị không quan trọng.

Ví dụ

Trong ví dụ này, các khối không vừa với container của chúng và sẽ sắp 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-flow: row wrap;
	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ụ

Hãy thay đổi hướng của trục chính (column thay vì row):

<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 {
	flex-flow: column wrap;
	justify-content: space-between;
	display: flex;
	height: 200px;
	width: 330px;
	margin: auto;
	border: 1px solid #696989;
}
#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 các 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 phụ
thuộc tính flex-wrap,
thiết lập tính đa dòng cho các khối flex
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 duy nhất
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 độ mở rộng của các khối flex
thuộc tính flex-shrink,
thiết lập độ co lại của các khối flex
thuộc tính flex,
cách viết tắt cho flex-grow, flex-shrink và flex-basis