Flexbox là gì? Vai trò của Flexbox trong React Native

16:56 22/02/2024

Flexbox là một hệ thống layout mạnh mẽ trong React Native cho phép bạn sắp xếp các component con một cách linh hoạt và hiệu quả. Bài viết này sẽ chỉ ra vì sao hệ thống này dựa trên mô hình hộp (box model) và cung cấp các thuộc tính để điều chỉnh kích thước, vị trí và cách các component con tương tác với nhau.

  1. Ưu điểm của Flex:
  • Linh hoạt: Flex cho phép bạn dễ dàng tạo ra các layout phức tạp với nhiều component con.
  • Hiệu quả: Flex được tối ưu hóa cho hiệu suất và sử dụng ít tài nguyên hệ thống.
  • Dễ sử dụng: Flex cung cấp cú pháp đơn giản và dễ hiểu để định nghĩa layout.
  1. Các thuộc tính Flex:
  • flexDirection: Xác định hướng sắp xếp các component con, có thể là ngang (row) hoặc dọc (column).
  • justifyContent: Xác định cách sắp xếp các component con theo chiều ngang (main axis). Các giá trị phổ biến bao gồm:

– flex-start: Căn chỉnh các component con sang trái.

– center: Căn chỉnh các component con ở giữa.

– flex-end: Căn chỉnh các component con sang phải.

  • alignItems: Xác định cách sắp xếp các component con theo chiều dọc (cross axis). Các giá trị phổ biến bao gồm:

– flex-start: Căn chỉnh các component con lên trên.

– center: Căn chỉnh các component con ở giữa.

– flex-end: Căn chỉnh các component con xuống dưới.

  • flex: Xác định độ co giãn của component con so với các component con khác. Giá trị mặc định là 0, nghĩa là component con sẽ không co giãn.
  • alignContent: Xác định cách sắp xếp các component con trên trục cross axis khi có nhiều dòng. Các giá trị phổ biến bao gồm:
  • flex-start: Căn chỉnh các component con lên trên.
  • center: Căn chỉnh các component con ở giữa.
  • flex-end: Căn chỉnh các component con xuống dưới.
  • alignSelf: Cho phép bạn ghi đè thuộc tính alignItems cho một component con cụ thể.
  1. Ví dụ sử dụng Flex:

Dưới đây là ví dụ đơn giản về việc sử dụng Flex để sắp xếp hai TextView theo chiều dọc:

Flex có thể được sử dụng để tạo các layout phức tạp hơn. Ví dụ, bạn có thể sử dụng Flex để tạo một layout với hai cột, với TextView ở cột đầu tiên và ImageView ở cột thứ hai:

4. justifyContent

justifyContent là một thuộc tính quan trọng trong hệ thống layout Flex của React Native, cho phép bạn kiểm soát cách các component con được sắp xếp dọc theo trục chính (main axis) của layout. Bài viết này sẽ phân tích chi tiết từng giá trị của justifyContent và cung cấp các ví dụ cụ thể để giúp bạn hiểu rõ cách sử dụng thuộc tính này.

Các giá trị của justifyContent:

flex-start: Đây là giá trị mặc định. Các component con sẽ được căn chỉnh sát mép trên của container.

center: Các component con sẽ được căn chỉnh ở giữa container theo chiều dọc.

flex-end: Các component con sẽ được căn chỉnh sát mép dưới của container.

space-between: Các component con sẽ được phân bố đều dọc theo trục chính, với khoảng cách bằng nhau giữa các component con và mép container.

space-around: Các component con sẽ được phân bố đều dọc theo trục chính, với khoảng cách bằng nhau giữa các component con.

space-evenly: Giống như space-around, nhưng khoảng cách giữa các component con sẽ được tính toán để đảm bảo khoảng cách đều nhau, bao gồm cả khoảng cách giữa mép container và component con đầu tiên/cuối cùng.

Flex là một hệ thống layout mạnh mẽ và linh hoạt giúp bạn tạo ra các giao diện người dùng đẹp mắt và hiệu quả. Hiểu rõ các thuộc tính Flex và cách sử dụng chúng sẽ giúp bạn xây dựng các ứng dụng React Native với layout hoàn chỉnh.

Giảng viên: Nguyễn Ngọc Chấn
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM

Cùng chuyên mục

Đăng Kí học Fpoly 2024

  • Max. file size: 512 MB.
  • Max. file size: 512 MB.
  • Max. file size: 512 MB.