Thuộc tính flex-shrink trong CSS
Bùi Tấn Lực - 804
- 13/10/2025
Chức năng của Thuộc tính flex-shrink trong CSS
Thuộc tính flex-shrink trong CSS dùng để thu hẹp chiều rộng của các phần tử HTML xuống cho phù hợp với chiều rộng của phần tử cha, thuộc tính này hoạt động trong trường hợp tổng các giá trị flex-basis của các phần tử con lớn hơn chiều rộng của phần tử cha, nếu giá trị flex-shrink của các phần tử con bằng nhau thì chiều rộng co lại bằng nhau, nếu giá trị flex-shrink nào lớn hơn thì sẽ co lại nhiều hơn, nếu giá trị flex-shrink bằng 0 thì phần tử con sẽ không co lại mà giữ nguyên kích thước ban đầu, ngay cả khi không đủ không gian.
Cú pháp của Thuộc tính flex-shrink trong CSS
flex-shrink: giatri;
giatri: Giá trị là những con số (Ví dụ: 1, 2, 3, 0,....)
Code Thuộc tính flex-shrink trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính flex-shrink trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{border:1px solid red; display: flex; width:100%; height:100px; margin-bottom:10px}
.divcha div {border:1px solid blue; flex-basis:500px}
</style>
</head>
<body>
<h1>Code Thuộc tính flex-shrink trong CSS</h1>
<p>Dùng để thu hẹp chiều rộng của các phần tử HTML xuống cho phù hợp với chiều rộng của phần tử cha, thuộc tính này hoạt động trong trường hợp tổng các giá trị flex-basis của các phần tử con lớn hơn chiều rộng của phần tử cha, nếu giá trị flex-shrink của các phần tử con bằng nhau thì chiều rộng co lại bằng nhau, nếu giá trị flex-shrink nào lớn hơn thì sẽ co lại nhiều hơn, nếu giá trị flex-shrink bằng 0 thì phần tử con sẽ không co lại mà giữ nguyên kích thước ban đầu, ngay cả khi không đủ không gian:</p>
<div class="divcha">
<div style="flex-shrink: 1;">flex-shrink: 1;</div>
<div style="flex-shrink: 1;">flex-shrink: 1;</div>
<div style="flex-shrink: 2;">flex-shrink: 2;</div>
<div style="flex-shrink: 3;">flex-shrink: 3;</div>
</div>
<div class="divcha">
<div style="flex-shrink: 1;">flex-shrink: 1;</div>
<div style="flex-shrink: 2;">flex-shrink: 2;</div>
<div style="flex-shrink: 2;">flex-shrink: 2;</div>
<div style="flex-shrink: 3;">flex-shrink: 3;</div>
</div>
<div class="divcha">
<div style="flex-shrink: 1;">flex-shrink: 1;</div>
<div style="flex-shrink: 1;">flex-shrink: 1;</div>
<div style="flex-shrink: 1;">flex-shrink: 1;</div>
<div style="flex-shrink: 3;">flex-shrink: 3;</div>
</div>
</body>
</html>
Cách flex-shrink phân chia không gian khi Flexbox thiếu chỗ
Khi tổng kích thước các phần tử Flexbox lớn hơn không gian của container, flex-shrink quyết định phần tử nào được phép thu nhỏ và mức độ thu nhỏ của từng phần tử. Giá trị càng lớn không đồng nghĩa phần tử sẽ co đúng theo cùng một tỷ lệ đơn giản, bởi trình duyệt còn xét đến kích thước cơ sở của từng phần tử.
flex-shrink co phần tử theo tỷ lệ như thế nào?
Flexbox chỉ thực hiện co khi các phần tử không đủ chỗ để nằm trên cùng một dòng. Nếu các phần tử có cùng kích thước cơ sở và cùng giá trị flex-shrink, chúng thường được thu nhỏ tương đối đồng đều.
Khi giá trị flex-shrink khác nhau, phần tử có giá trị lớn hơn sẽ chịu mức co mạnh hơn. Tuy nhiên, kết quả thực tế còn phụ thuộc vào kích thước ban đầu của từng phần tử. Vì vậy, không nên hiểu đơn giản rằng phần tử có flex-shrink: 2 luôn co gấp đôi phần tử có flex-shrink: 1.
.container {
display: flex;
width: 500px;
}
.item {
width: 300px;
flex-shrink: 1;
}
.item-large {
width: 300px;
flex-shrink: 2;
}
Trong ví dụ trên, hai phần tử có tổng chiều rộng 600px nhưng container chỉ rộng 500px. Flexbox phải phân bổ lại 100px không gian bị thiếu. Phần tử có flex-shrink: 2 được ưu tiên co nhiều hơn phần tử có flex-shrink: 1.
flex-shrink kết hợp với flex-basis ra sao?
flex-basis xác định kích thước cơ sở của phần tử trước khi Flexbox xử lý phần không gian dư hoặc thiếu, còn flex-shrink kiểm soát khả năng thu nhỏ từ kích thước cơ sở đó.
Điều này đặc biệt quan trọng khi các phần tử có kích thước cơ sở khác nhau. Hai phần tử cùng đặt flex-shrink: 1 vẫn có thể bị co với mức độ khác nhau vì kích thước ban đầu của chúng không giống nhau.
.item {
flex-basis: 300px;
flex-shrink: 1;
}
.item-small {
flex-basis: 150px;
flex-shrink: 1;
}
Cách kết hợp này giúp kiểm soát layout rõ ràng hơn: flex-basis xác định điểm xuất phát, trong khi flex-shrink quyết định phần tử có thể thu hẹp khi container không còn đủ diện tích.
Khi nào nên đặt flex-shrink bằng 0?
Đặt flex-shrink: 0 khi muốn một phần tử giữ nguyên kích thước cơ sở thay vì bị Flexbox tự động thu nhỏ. Cách này hữu ích với những thành phần cần duy trì kích thước ổn định như nút, biểu tượng, hình ảnh hoặc một cột có chiều rộng cố định.
.item {
flex-basis: 200px;
flex-shrink: 0;
}
Khi đó, phần tử sẽ không co xuống dưới kích thước cơ sở chỉ vì container bị thiếu không gian. Tuy nhiên, nếu tổng kích thước các phần tử vượt quá container, bố cục có thể bị tràn. Vì vậy, flex-shrink: 0 nên được dùng có chủ đích thay vì áp dụng cho mọi phần tử.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính flex-shrink trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
