Thuộc tính flex

Thuộc tính flex là cách viết tắt cho flex-basis, flex-shrink và flex-grow.

Áp dụng cho: một flex item cụ thể.

Thứ tự của giá trị không quan trọng. Tham số thứ hai và thứ ba (flex-shrink, flex-basis) không bắt buộc.

Giá trị

Xem các thuộc tính tương ứng.

Giá trị mặc định: 0 1 auto.

Ví dụ

Giả sử chúng ta có 3 phần tử. Chiều rộng của mỗi phần tử là 200px và tổng cộng bằng 600px, lớn hơn chiều rộng của container cha, vốn bằng 300px. Hãy đặt chiều rộng cho phần tử thứ nhất là 200px, cho phần tử thứ hai - 300px, cho phần tử thứ ba - 100px. Đối với tất cả các phần tử, giá trị flex-basis sẽ là 1, còn flex-shrink - lần lượt là 1, 2, 3 tương ứng với số thứ tự của phần tử:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem2">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

Xem thêm

thuộc tính flex-direction,
xác định hướng của các trục trong flex container
thuộc tính justify-content,
xác định căn chỉnh dọc theo trục chính
thuộc tính align-items,
xác định căn chỉnh dọc theo trục chéo
thuộc tính flex-wrap,
xác định khả năng xuống dòng của các flex item
thuộc tính flex-flow,
cách viết tắt cho flex-direction và flex-wrap
thuộc tính order,
xác định thứ tự của các flex item
thuộc tính align-self,
xác định căn chỉnh của một item riêng lẻ
thuộc tính flex-basis,
xác định kích thước của một flex item cụ thể
thuộc tính flex-grow,
xác định khả năng mở rộng của các flex item
thuộc tính flex-shrink,
xác định khả năng co lại của các flex item