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

CSS flex-grow là một trong những thuộc tính của CSS Flexbox, nó được sử dụng để xác định tỷ lệ tăng kích thước của các phần tử bên trong một container Flexbox. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về CSS flex-grow property, từ tổng quan đến ưu và nhược điểm của thuộc tính này.

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-grow property là gì ?

Thuộc tính CSS flex-grow được sử dụng để chỉ định số lượng không gian mà một phần tử linh hoạt sẽ chiếm nếu có không gian trống trong container Flexbox. Thuộc tính này có thể được định nghĩa như khả năng của một phần tử phát triển so với các phần tử khác trong container. Nó là một giá trị số, xác định tỷ lệ tăng kích thước của phần tử.

Nếu ta thiết lập giá trị flex-grow là 1 cho tất cả các phần tử, các phần tử đó sẽ có kích thước bằng nhau trong container. Nhưng nếu ta đặt giá trị flex-grow là 2 cho một trong các phần tử, phần tử tương ứng đó sẽ chiếm hai lần không gian so với các phần tử còn lại.

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

Để sử dụng CSS flex-grow property, ta có thể áp dụng nó trực tiếp vào trong style của một phần tử. Cú pháp như sau:

flex-grow: number;

Trong đó, number là một giá trị số dương xác định tỷ lệ tăng kích thước của phần tử. Giá trị mặc định của thuộc tính này là 0, và không cho phép giá trị âm. Khi giá trị bằng 0, phần tử sẽ không tăng kích thước, ngay cả khi có không gian trống. Phần tử sẽ chiếm hết không gian mà nó yêu cầu.

Ngoài ra, ta có thể sử dụng thuộc tính flex, là viết tắt của flex-grow, flex-shrink, và flex-basis. Khi sử dụng thuộc tính này, ta có thể đặt tất cả các giá trị một lần để đảm bảo rằng chúng được thiết lập đúng.

flex: <flex-grow> <flex-shrink> <flex-basis>;

Ví dụ:

.flex-item {
  flex: 1 0 auto;
}

Trong ví dụ này, flex-grow được đặt là 1, flex-shrink được đặt là 0 và flex-basis được đặt là auto.

Ví dụ sử dụng CSS flex-grow property

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

Ví dụ, nếu có hai flex item, mỗi item có flex-grow 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-grow là 2, thì nó sẽ chiếm 2 lần không gian so với flex item còn lại.

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

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

Ví dụ này sẽ tạo ra hai flex item, mỗi item có chiều rộng bằng một nửa chiều rộng của flex container. Nếu bạn thay đổi chiều rộng của flex container, các flex item sẽ tự động điều chỉnh kích thước của chúng để sử dụng tất cả không gian có sẵn.

Bạn cũng có thể sử dụng flex-grow 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-grow 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.

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

<div style="display: flex; flex-direction: column;">
  <div style="flex-grow: 1;">Item 1</div>
  <div style="flex-grow: 1;">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 thay đổi chiều cao của flex container, các flex item sẽ tự động điều chỉnh kích thước của chúng để sử dụng tất cả không gian có sẵn.

Ưu và Nhược điểm CSS flex-grow property

Ưu điểm của CSS flex-grow property là giúp điều chỉnh kích thước của các phần tử trong container Flexbox một cách linh hoạt. Ta có thể sử dụng thuộc tính này để điều chỉnh kích thước của các phần tử sao cho chúng phù hợp với nhu cầu người sử dụng.

Tuy nhiên, nhược điểm của CSS flex-grow property là nó có thể làm cho layout trở nên khó kiểm soát. Nếu ta không biết cách sử dụng nó một cách hiệu quả, các phần tử trong container Flexbox có thể phát triển quá lớ quá hoặc không đồng nhất với nhau, dẫn đến một layout kém chất lượng.

Lời khuyên CSS flex-grow property

Để sử dụng CSS flex-grow property hiệu quả, ta nên xác định rõ yêu cầu của layout trước khi áp dụng thuộc tính này. Nếu các phần tử trong container cần tăng kích thước một cách đồng đều, ta có thể đặt giá trị flex-grow là như nhau cho tất cả các phần tử. Tuy nhiên, nếu ta muốn một số phần tử tăng kích thước nhanh hơn so với các phần tử khác, ta có thể thiết lập giá trị flex-grow cao hơn cho những phần tử đó.

Ngoài ra, để kiểm soát được việc sử dụng CSS flex-grow property, ta cũng nên kết hợp sử dụng với các thuộc tính khác của CSS Flexbox như flex-shrink và flex-basis.