Bùi Tấn Lực - 122
- 13/10/2025
Thuộc tính flex-shrink trong CSS dùng để thu hẹp chiều rộng của phần tử HTML nếu giới hạn flex-basis bị thu hẹp, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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 *
