CSS flex-shrink property là gì sử dụng như thế nào ?

CSS flex-shrink property là một trong những thuộc tính quan trọng của CSS Flexbox. Thuộc tính này được sử dụng để chỉ định tỉ lệ co lại của các phần tử con trong Flex container khi không đủ không gian hiển thị trên trình duyệt.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS flex-shrink property là gì ?

Thuộc tính CSS flex-shrink xác định mức độ co lại của các phần tử con so với các phần tử khác trong cùng Flex container. Khi không có đủ không gian hiển thị, phần tử con sẽ co lại hoặc giãn ra để lấp đầy không gian còn trống.

Giá trị của thuộc tính flex-shrink là số dương, giá trị mặc định là 1 nghĩa là phần tử con không co lại. Nếu tất cả các phần tử con trong container đều có giá trị flex-shrink bằng nhau, chúng sẽ co lại cùng mức độ. Nếu có một phần tử con có giá trị flex-shrink cao hơn các phần tử khác, nó sẽ co lại nhiều hơn các phần tử khác.

Hướng dẫn CSS flex-shrink property

Để sử dụng thuộc tính CSS flex-shrink, ta chỉ việc gán giá trị của nó cho phần tử con trong container:

.item {
  flex-shrink: <number>;
}

Trong đó, <number> là giá trị số dương cho biết mức độ co lại của phần tử con.

Ví dụ CSS flex-shrink property

CSS flex-shrink property được sử dụng để xác định khả năng co lại của một flex item khi không gian trong flex container không đủ. Giá trị của flex-shrink là một số không âm, đại diện cho tỷ lệ phần trăm không gian mà flex item sẽ co lại khi không gian không đủ.

Ví dụ, nếu có hai flex item, mỗi item có flex-shrink là 1, thì chúng sẽ chia đều không gian còn lại trong flex container. Nếu có một flex item có flex-shrink là 0, thì nó sẽ không co lại, ngay cả khi không gian không đủ.

Dưới đây là một ví dụ về cách sử dụng CSS flex-shrink property:

<div style="display: flex; flex-direction: column;">
  <div style="flex-grow: 1; flex-shrink: 1;">Item 1</div>
  <div style="flex-grow: 1; flex-shrink: 0;">Item 2</div>
</div>

Ví dụ này sẽ tạo ra hai flex item, mỗi item sẽ chiếm một nửa chiều cao của flex container. Nếu bạn thu nhỏ chiều cao của flex container, flex item đầu tiên sẽ co lại để phù hợp với không gian có sẵn, nhưng flex item thứ hai sẽ không co lại, và sẽ bị cắt bớt.

Bạn cũng có thể sử dụng flex-shrink property để tạo hiệu ứng xếp chồng cho các flex item. Ví dụ, nếu có hai flex item, mỗi item có flex-shrink là 1, và flex-direction của flex container là column, thì các flex item sẽ xếp chồng lên nhau, mỗi item sẽ chiếm một nửa chiều cao của flex container.

Nếu bạn thu nhỏ chiều cao của flex container, các flex item sẽ tự động co lại để phù hợp với không gian có sẵn. Flex item thứ hai sẽ co lại nhiều hơn flex item thứ nhất, vì nó có flex-shrink là 0.

Dưới đây là một ví dụ về cách sử dụng CSS flex-shrink property để tạo hiệu ứng xếp chồng:

<div style="display: flex; flex-direction: column;">
  <div style="flex-grow: 1; flex-shrink: 1;">Item 1</div>
  <div style="flex-grow: 1; flex-shrink: 0;">Item 2</div>
</div>

Ví dụ này sẽ tạo ra hai flex item, mỗi item sẽ chiếm một nửa chiều cao của flex container. Nếu bạn thu nhỏ chiều cao của flex container, các flex item sẽ tự động co lại để phù hợp với không gian có sẵn. Flex item thứ hai sẽ co lại nhiều hơn flex item thứ nhất, vì nó có flex-shrink là 0.

Ưu và nhược điểm CSS flex-shrink property

Ưu điểm

• Giúp quản lý không gian hiển thị của các phần tử con trong Flex container.
• Cho phép tăng tính linh hoạt và thích ứng với kích thước của trình duyệt.

Nhược điểm

• Việc sử dụng thuộc tính này có thể làm ảnh hưởng đến layout của website.

Lời khuyên CSS flex-shrink property

Dưới đây là một số lời khuyên khi sử dụng thuộc tính CSS flex-shrink:

• Hãy cẩn thận khi thiết lập giá trị của flex-shrink để tránh làm ảnh hưởng đến layout của website.
• Sử dụng flex-shrink cùng với các thuộc tính khác của Flexbox để tạo ra một bố cục linh hoạt và đáp ứng được đa dạng các kích thước trình duyệt.
• Kiểm tra layout của website trên nhiều trình duyệt và thiết bị để đảm bảo rằng các phần tử con được hiển thị đúng cách.

Kết luận

CSS flex-shrink property là một trong những thuộc tính quan trọng của CSS Flexbox. Việc sử dụng thuộc tính này giúp quản lý không gian hiển thị của các phần tử con trong Flex container một cách hiệu quả. Tuy nhiên, hãy chú ý đến giá trị của flex-shrink để tránh làm ảnh hưởng đến layout của website. Nếu sử dụng đúng cách, thuộc tính CSS flex-shrink sẽ giúp tăng tính linh hoạt và thích ứng với kích thước của trình duyệt, tạo ra một bố cục linh hoạt và đáp ứng được đa dạng các kích thước trình duyệt.