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

CSS flex-flow property là thuộc tính rút gọn của các thuộc tính flex-direction và flex-wrap. Thuộc tính này chỉ ảnh hưởng đến các phần tử flex-item, vì vậy nếu phần tử của container không phải là flex-item thì thuộc tính flex-flow sẽ không ảnh hưởng đến phần tử tương ứng.

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

Giống như đã đề cập ở trên, CSS flex-flow property là thuộc tính rút gọn của các thuộc tính flex-direction và flex-wrap. Nó được sử dụng để xác định hướng và bọc các phần tử linh hoạt trong container flex.

Cú pháp mặc định của thuộc tính flex-flow là row nowrap, tức là sự kết hợp giữa các giá trị mặc định của các thuộc tính flex-direction (i.e. row) và flex-wrap (i.e. nowrap). Các giá trị có thể của thuộc tính này được liệt kê trong bảng sau:

Giá trị	Mô tả
flex-direction	Được sử dụng để đặt hướng các phần tử linh hoạt bên trong container flex. Giá trị mặc định là row (trái sang phải, từ trên xuống dưới). Các giá trị có thể của thuộc tính này là row, row-reverse, column và column-reverse.
flex-wrap	Xác định liệu các phần tử linh hoạt có nên được bọc hay không, trong trường hợp không đủ không gian cho chúng trên một dòng linh hoạt. Giá trị mặc định là nowrap. Các giá trị có thể của thuộc tính này là nowrap, wrap và wrap-reverse.
initial	Đặt giá trị thuộc tính thành giá trị mặc định của nó.
inherit	Kế thừa giá trị thuộc tính từ phần tử cha của nó.

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

Dưới đây là ví dụ về việc sử dụng giá trị wrap của thuộc tính flex-wrap và tất cả các giá trị có thể của thuộc tính flex-direction là row, row-reverse, column và column-reverse. Trong container đầu tiên, chúng tôi áp dụng flex-flow: row nowrap; cho các phần tử flex-item, trong container thứ hai, chúng tôi áp dụng flex-flow: row-reverse nowrap; cho các phần tử flex-item, trong container thứ ba, chúng tôi áp dụng flex-flow: column nowrap; cho các phần tử flex-item, và trong container thứ tư, chúng tôi áp dụng flex-flow: column-reverse nowrap; cho các phần tử flex-item.

.container{
  display: flex;
  flex-flow: row wrap;
}

.container > div {
  flex: 1 0 auto;
}

Ví dụ CSS flex-flow property

CSS flex-flow property là một shorthand property cho các thuộc tính flex-direction và flex-wrap. Flex-direction property xác định hướng của các flex item, trong khi flex-wrap property xác định liệu các flex item có nên được wrap nếu không thể chứa trong một hàng hoặc cột duy nhất hay không.

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

<div style="display: flex; flex-flow: column nowrap;">
  <div style="width: 100px; height: 100px;">Item 1</div>
  <div style="width: 200px; height: 200px;">Item 2</div>
</div>

Ví dụ này sẽ tạo ra hai flex item, mỗi item sẽ được hiển thị theo chiều dọc, vì flex-direction là column. Flex-wrap là nowrap, có nghĩa là các flex item sẽ không được wrap nếu không thể chứa trong một hàng hoặc cột duy nhất.

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.

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

<div style="display: flex; flex-flow: row wrap;">
  <div style="width: 100px; height: 100px;">Item 1</div>
  <div style="width: 200px; height: 200px;">Item 2</div>
</div>

Ví dụ này sẽ tạo ra hai flex item, mỗi item sẽ được hiển thị theo chiều ngang, vì flex-direction là row. Flex-wrap là wrap, có nghĩa là các flex item sẽ được wrap nếu không thể chứa trong một hàng hoặc cột duy nhất.

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. Nếu flex item quá rộng để chứa trong một hàng, nó sẽ được wrap thành một hàng mới.

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

Ưu điểm

• Đơn giản hóa việc xác định hướng và bố trí các phần tử trong container flex.
• Có thể sử dụng nhiều giá trị khác nhau để tạo ra các mẫu bố trí đa dạng.

Nhược điểm

• Không sử dụng được trên các phần tử không phải là flex-item.
• Không hỗ trợ các thuộc tính linh hoạt hơn như căn chỉnh, khoảng cách, vv.

Lời khuyên CSS flex-flow property

Lời khuyên CSS flex-flow property là một công cụ hữu ích cho việc bố trí các phần tử trong container flex. Tuy nhiên, để sử dụng đúng cách, bạn cần hiểu rõ về cú pháp và giá trị của thuộc tính.

Để tận dụng tối đa lợi ích của flex-flow property, hãy nhớ:

• Xác định rõ ràng hướng và bố trí phù hợp với nội dung và thiết kế của bạn.
• Chọn các giá trị phù hợp với mục đích sử dụng của bạn.
• Sử dụng các thuộc tính khác của flexbox để tùy chỉnh bố cục linh hoạt hơn.

Chúng tôi khuyên bạn nên thực hành và tìm hiểu thêm về cách sử dụng flex-flow property trong các trường hợp khác nhau để trở thành một nhà phát triển web chuyên nghiệp và hiệu quả.

Tổng kết

CSS flex-flow property là một công cụ hữu ích để điều khiển hướng và bố cục của các phần tử linh hoạt trong container flex. Bạn có thể chọn giữa các giá trị khác nhau để tạo ra các mẫu bố trí đa dạng. Tuy nhiên, để sử dụng đúng cách, bạn cần hiểu rõ về cú pháp và giá trị của thuộc tính này, cùng với việc sử dụng các thuộc tính khác của flexbox để tùy chỉnh bố cục linh hoạt hơn.