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. Bạn có thể đổi kích thước, bao bọc, 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à 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 kích thước để lấp đầy không gian có sẵn
• Chuyển 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 phối khoảng trống thừa giữa các mục bằng cách sử dụng các giá trị đặt sẵn thuận tiện

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 tổng thể của màn hình, 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 lưới và danh sách tải từng phần. Nếu bạn cần bao bọc 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 đường ngang hoặc dọc. Hướng của các đường này sẽ xác định 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. Độ 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 hai cách:

• Đến 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 của mặt hàng (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 khoảng trống 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 Hãy 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 thêm không gian từ kích thước chính grow – tỷ lệ không gian bổ sung mà mặt hàng này sẽ nhận được so với kích thước chính shrink – tỷ lệ thiếu hụt không gian so với kích thước chính mà mặt hàng này sẽ nhận được alignSelf – cách phân phối thêm khoảng trống 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 về 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 để 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 kích thước cơ sở của thành phần con: Sử dụng giá trị basis của thành phần con để tính kích thước ban đầu của thành phần đó dọc theo trục chính trước khi phân phối bất kỳ khoảng trống 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 (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 trẻ vào hàng. Nếu không, hãy đặt mục đó vào một dòng mới nếu bạn bật tính năng xuống dòng 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 theo trục chính: Đối với mỗi dòng, hãy phân phối thêm khoảng trống đến 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 thay đổi kích thước các mục theo trục ngang: Đối với mỗi dòng, hãy phân phối thêm khoảng trống 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 và dòng đó.

Giờ đây, khi bạn đã 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.