Đặt hành vi của vùng chứa

Để định cấu hình hành vi của vùng chứa FlexBox, hãy tạo một khối FlexBoxConfig và cung cấp khối đó bằng tham số config.

FlexBox(
    config = {
        direction = FlexDirection.Column
        wrap = FlexWrap.Wrap
        alignItems = FlexAlignItems.Center
        alignContent = FlexAlignContent.SpaceAround
        justifyContent = FlexJustifyContent.Center
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

Sử dụng FlexBoxConfig để xác định hướng bố cục, hành vi bao bọc, căn chỉnh và khoảng trống giữa các mục.

Hướng bố cục

Thuộc tính direction xác định trục chính, quy định hướng bố trí các mục.

Row (mặc định): Đặt trục chính thành trục ngang. Trong các ngôn ngữ viết từ trái sang phải, hướng này sẽ là từ trái sang phải, còn trong các ngôn ngữ viết từ phải sang trái thì ngược lại.
RowReverse: Đảo ngược hướng của Row.
Column: Đặt trục chính theo chiều dọc, từ trên xuống dưới.
ColumnReverse: Đảo ngược hướng của Column.

Căn chỉnh các mục và phân phối khoảng trống

Các phần sau đây mô tả cách căn chỉnh các mục và phân phối khoảng trống dọc theo trục chính và trục chéo.

Dọc theo trục chính

Sử dụng justifyContent để phân phối các mục dọc theo trục chính. Bảng sau đây cho thấy hành vi khi hướng là Row.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

Dọc theo trục chéo

Sử dụng alignItems để căn chỉnh các mục dọc theo trục chéo trong một dòng. Bạn có thể dùng công cụ sửa đổi alignSelf để ghi đè hành vi này cho từng mục.

Các hình ảnh sau đây cho thấy hành vi khi hướng là Row:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

Sử dụng alignContent để căn chỉnh các dòng theo trục chéo và phân phối thêm khoảng trống giữa các dòng. Thuộc tính này chỉ áp dụng khi có nhiều dòng (đã bật tính năng xuống dòng). Các hình ảnh sau đây cho thấy hành vi khi hướng là Row:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

Gói các mục

Tính năng xuống dòng cho phép vùng chứa FlexBox trở thành nhiều dòng, di chuyển những mục không vừa vào một hàng hoặc cột mới dọc theo trục chéo. Định cấu hình hành vi xuống dòng bằng cách sử dụng wrap.

Giá trị `FlexWrap`	Ví dụ sử dụng hướng `Row`
`NoWrap` (mặc định): Ngăn các mục xuống dòng. Các mục sẽ tràn nếu kích thước chính không đủ.
`Wrap`: Khi không có đủ không gian cho một mục (cộng với mọi khoảng trống), một dòng mới sẽ được tạo theo hướng của trục chéo. Ví dụ: nếu hướng là `Row`, một dòng mới sẽ được thêm bên dưới.
`WrapReverse`: Tương tự như `Wrap`, ngoại trừ việc dòng mới được thêm theo hướng ngược lại với trục chéo. Ví dụ: nếu hướng là `Row`, một dòng mới sẽ được thêm lên trên.

Ví dụ sau đây minh hoạ cách hoạt động của thuật toán bao bọc FlexBox. Vùng chứa FlexBox có kích thước chính là 100dp, với wrap được đặt thành FlexWrap.Wrap và khoảng trống là 8dp. Nội dung này chứa 3 mục có basis 20dp, 40dp và 50dp tương ứng.

Còn 100dp chỗ trống trong hàng. Trẻ 1 là 20dp. Có khoảng trống, nên Trẻ 1 được đặt vào dòng.

Mục đầu tiên được đặt trong vùng chứa FlexBox. — **Hình 1.** Mục đầu tiên được đặt trong vùng chứa `FlexBox`.

Còn 80dp chỗ trống trong hàng. Khoảng cách là 8dp. Child 2 là 40dp. Không gian cần thiết là 48dp. Có khoảng trống, vì vậy khoảng cách và Phần tử con 2 được đặt vào dòng.

Còn 32dp chỗ trống trong hàng. Khoảng cách là 8dp. Trẻ 3 là 50dp. Không gian cần thiết là 58dp. Không đủ dung lượng trong dòng hiện tại, nên Con 3 được đặt ở một dòng mới.

Mục thứ ba được đặt trên một dòng mới vì không vừa với dòng đầu tiên. — **Hình 3.** Mặt hàng thứ ba được đặt trên một dòng mới vì không vừa với dòng đầu tiên.

Thêm khoảng trống giữa các mục

Thêm khoảng trống giữa các hàng và cột bằng cách sử dụng rowGap và columnGap. Điều này rất hữu ích để tránh thêm đối tượng sửa đổi khoảng cách vào các thành phần con.