Thuộc tính flex-shrink

Thuộc tính flex-shrink xác định mức độ một khối flex sẽ bị thu nhỏ so với các phần tử lân cận bên trong flex container trong trường hợp không có đủ không gian trống.

Ví dụ: nếu tất cả các khối flex bên trong flex container có flex-shrink:1, thì chúng sẽ có cùng kích thước. Nếu một trong số chúng có flex-shrink:2, thì nó sẽ nhỏ hơn gấp 2 lần so với tất cả các khối còn lại.

Áp dụng cho: một khối flex cụ thể.

Thuộc tính này là một phần của thuộc tính viết tắt flex.

Cú pháp

bộ chọn {
	flex-shrink: số dương;
}

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

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 chiều rộng bằng 600px, điều này lớn hơn chiều rộng của container cha, vốn chỉ bằng 350px:

<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-shrink: 1;
}
.elem2 {
	flex-shrink: 2;
}
.elem3 {
	flex-shrink: 3;
}

Hãy tính toán không gian trống âm theo công thức:

600px - 350px = 250px

Tổng chiều rộng có trọng số của các phần tử có tính đến giá trị của thuộc tính flex-shrink cho từng phần tử sẽ bằng:

200px * 1 + 200px * 2 + 200px * 3 = 1200px

Bây giờ hãy xác định phần tử đầu tiên sẽ bị thu nhỏ bao nhiêu:

250px * 1 (flex-shrink) * 200 (width) / 1200 = 41,6px

Phần tử thứ hai:

250px * 2 (flex-shrink) * 200 (width) / 1200 = 83,3px

Phần tử thứ ba:

250px * 3 (flex-shrink) * 200 (width) / 1200 = 125px

Kết quả là phần tử thứ ba, có giá trị flex-shrink bằng 3, sẽ bị thu nhỏ nhiều hơn các phần tử khác.

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 khả năng xuống dòng của các khối flex
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 mức độ "mở rộng" của các khối flex
thuộc tính flex,
viết tắt cho flex-grow, flex-shrink và flex-basis