FlexBox

FlexBox là một vùng chứa sắp xếp các mục theo một hướng. Vùng chứa này có thể đổi kích thước, gói, căn chỉnh và phân phối khoảng trống giữa các mục để lấp đầy không gian có sẵn một cách tối ưu. Đây là một bố cục hữu ích cho các mục có kích thước khác nhau và để đổi kích thước các mục khi không gian có sẵn thay đổi.

Với FlexBox, bạn có thể:

• Kiểm soát cách các mục tăng và giảm để lấp đầy không gian có sẵn
• Gói các mục vào các hàng hoặc cột mới khi không có đủ không gian cho các mục đó
• Phân phối khoảng trống bổ sung giữa các mục bằng các chế độ cài sẵn tiện lợi

Trường hợp sử dụng FlexBox

FlexBox thường được dùng để hiển thị một số ít mục trong bố cục màn hình tổng thể. Đối với bố cục màn hình tổng thể, Grid thường là lựa chọn phù hợp hơn. FlexBox không hỗ trợ tải từng phần các mục. Để hiển thị số lượng lớn mục, hãy sử dụng danh sách và lưới tải từng phần. Nếu bạn cần gói các mục, hãy sử dụng FlexBox thay vì FlowRow và FlowColumn.

Thuật ngữ và khái niệm

FlexBox sắp xếp các mục theo dòng ngang hoặc dọc. Hướng của các dòng này thiết lập trục chính. 90 độ so với trục chính là trục chéo. Chiều dài của FlexBox dọc theo trục chính được gọi là kích thước chính. Chiều dài trục chéo tương ứng được gọi là kích thước chéo. Các kích thước và trục này tạo thành cơ sở cho hành vi của FlexBox.

Áp dụng các thuộc tính

Bạn có thể áp dụng các thuộc tính FlexBox theo 2 cách:

• Đối với vùng chứa FlexBox bằng cách sử dụng FlexBox(config)
• Đối với một mục bên trong FlexBox bằng cách sử dụng Modifier.flex

Thuộc tính vùng chứa (config)

Thuộc tính mục (Modifier.flex)

direction – hướng bố cục mục wrap – có gói các mục hay không nếu kích thước chính không đủ justifyContent – cách phân phối các mục dọc theo trục chính alignItems – cách căn chỉnh các mục dọc theo trục chéo alignContent – cách phân phối khoảng trống bổ sung từ kích thước chéo khi có nhiều dòng rowGap / columnGap – thêm khoảng trống giữa các mục và dòng Xem phần Đặt hành vi vùng chứa để biết thêm thông tin về các thuộc tính này.

basis – kích thước của mục trước khi phân phối bất kỳ khoảng trống bổ sung nào từ kích thước chính grow – phần khoảng trống bổ sung từ kích thước chính mà mục này sẽ nhận được shrink – phần thiếu hụt khoảng trống từ kích thước chính mà mục này sẽ nhận được alignSelf – cách phân phối khoảng trống bổ sung từ kích thước chéo cho mục này, ghi đè alignItems order – kiểm soát thứ tự bố cục Xem phần Đặt hành vi mục để biết thêm thông tin về các thuộc tính này.

Tìm hiểu thuật toán bố cục FlexBox

Một trong những tính năng mạnh mẽ nhất của FlexBox là khả năng đổi kích thước các phần tử con để phù hợp nhất với không gian có sẵn. Việc hiểu cách FlexBox thực hiện việc này có thể giúp bạn đặt các thuộc tính FlexBox để tối ưu hoá giao diện người dùng cho mọi kích thước có thể.

Thuật toán bố cục của FlexBox hoạt động theo cách sau:

1. Tính toán kích thước cơ sở của phần tử con: Sử dụng giá trị basis `basis` của phần tử con để tính toán kích thước ban đầu của phần tử đó dọc theo trục chính trước khi phân phối bất kỳ khoảng trống bổ sung nào.

2. Sắp xếp các phần tử con: Sắp xếp các phần tử con theo giá trị order của chúng (nếu có) .

3. Tạo dòng: Đối với mỗi phần tử con, hãy kiểm tra xem kích thước ban đầu của phần tử đó cộng với gap có vừa với khoảng trống còn lại trên dòng hiện tại hay không. Nếu có, hãy đặt phần tử con này vào dòng. Nếu không, hãy đặt phần tử đó vào một dòng mới nếu bạn bật tính năng gói, hoặc đặt mục vào dòng hiện tại nơi mục đó sẽ tràn (mục đó sẽ bị che khuất một phần bởi cạnh của vùng chứa).

4. Căn chỉnh hoặc đổi kích thước các mục trong trục chính: Đối với mỗi dòng, hãy phân phối khoảng trống bổ sung cho hoặc giữa các mục bằng cách đổi kích thước hoặc căn chỉnh các mục đó.

5. Căn chỉnh hoặc đổi kích thước các mục trong trục chéo: Đối với mỗi dòng, hãy phân phối khoảng trống bổ sung cho hoặc giữa các mục và dòng bằng cách kéo dài hoặc căn chỉnh các mục đó.

Giờ đây, bạn đã làm quen với các khái niệm về FlexBox. Hãy xem phần Bắt đầu để tạo FlexBox cơ bản.