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.

FlexBox có trục chính theo chiều ngang và trục chéo theo chiều dọc. — **Hình 1.** Các trục và kích thước khi hướng `FlexBox` là `Row`.

FlexBox có trục chính dọc và trục chéo ngang. — **Hình 2.** Các trục và kích thước khi hướng `FlexBox` là `Column`.

Á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.

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:

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.
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ó).
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).
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 đó.
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.

Việc nên làm và không nên làm của quảng cáo thích ứng

Tiếp

Bắt đầu