FlexBox

FlexBox là một vùng chứa sắp xếp các mục theo một hướng duy nhất. Nó có thể đổi kích thước, gói, căn chỉnh và phân phối không gian giữa các mục để lấp đầy không gian có sẵn một cách tối ưu. Đây là 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 kích thước để lấp đầy không gian có sẵn
• Xuống dòng cho các mục sang hàng hoặc cột mới khi không có đủ không gian cho các mục đó
• Phân bổ không gian thừa giữa các mục bằng các chế độ đặt 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 các 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 bố trí 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. Trục vuông góc 90 độ 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. Độ 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 nên cơ sở cho hành vi của FlexBox.

Áp dụng thuộc tính

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

• Vào vùng chứa FlexBox bằng FlexBox(config)
• Đến một mục bên trong FlexBox bằng Modifier.flex

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

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

direction – hướng bố cục của 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 không gian thừa từ kích thước chéo khi có nhiều dòng rowGap / columnGap – thêm khoảng cách giữa các mục và dòng Xem phần Đặt hành vi của 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 không gian thừa từ kích thước chính grow – tỷ lệ không gian bổ sung từ kích thước chính mà mục này sẽ nhận được shrink – tỷ lệ thiếu hụt không gian so với kích thước chính mà mục này sẽ nhận được alignSelf – cách phân bổ không gian thừa từ kích thước chéo cho mục này, ghi đè alignItems order – kiểm soát thứ tự bố cục Hãy xem phần Đặt hành vi của 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 thành phần con để vừa vặn 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 kích thước cơ sở của phần tử con: Sử dụng giá trị basis của phần tử con để tính 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 thêm không gian.

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, 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ộng với gap có vừa với không gian còn lại trên dòng hiện tại hay không. Nếu đúng như vậy, hãy đặt thành phần con này vào dòng. Nếu không, hãy đặt mục đó vào một dòng mới nếu tính năng gói được bật hoặc đặt mục đó vào dòng hiện tại nơi mục đó sẽ bị 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 thêm không gian 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 bổ thêm không gian cho hoặc giữa các mục và dòng bằng cách kéo giãn hoặc căn chỉnh chúng.

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