Flow Builder tạo ra các layout responsive. Bạn không kéo phần tử đến tọa độ cụ thể — thay vào đó, bạn lồng chúng vào bên trong các container tự động sắp xếp các phần tử con.

Container quyết định hướng (dọc hay ngang), căn chỉnh và khoảng cách của các phần tử. Từng phần tử có thể tự điều chỉnh kích thước và margin, hoặc — khi cần — thoát khỏi flow bằng vị trí tuyệt đối (absolute) hoặc cố định (fixed).

Layout

Layout là công cụ chính để sắp xếp các phần tử trên màn hình. Mỗi container tự động phân bổ các phần tử con theo một tập quy tắc — hướng, căn chỉnh và khoảng cách. Các phần tử layout có trong builder gồm:

• Vertical Container: Sắp xếp các phần tử con từ trên xuống dưới
• Horizontal Container: Sắp xếp các phần tử con từ trái sang phải
• Divider: Đường phân cách trực quan giữa các phần tử
• Carousel: Tập hợp các slide có thể cuộn ngang
• Bottom Sheet: Bảng overlay trượt lên, hiển thị thêm nội dung khi người dùng nhấn vào nút

Container là các khối xây dựng chính của một màn hình. Bạn có thể lồng chúng vào nhau để tạo ra các layout phức tạp. Mỗi container có phần Layout trong bảng bên phải để điều khiển cách phân bổ các phần tử con.

Để nhóm các phần tử vào một container mới, dùng thao tác layer Wrap. Để xóa container và đưa các phần tử con lên cấp trên, dùng Unwrap.

Hướng

• Free: Không có layout tự động. Các phần tử con được định vị độc lập (hữu ích khi dùng vị trí tuyệt đối)
• Vertical: Các phần tử con xếp từ trên xuống dưới, như các hàng trong một cột
• Horizontal: Các phần tử con xếp từ trái sang phải, như các mục trong một hàng

Thứ tự phần tử

Các phần tử con hiển thị theo thứ tự xuất hiện trong bảng Layers. Trong container dọc, mục ở trên cùng trong danh sách xuất hiện ở đầu màn hình. Trong container ngang, mục ở trên cùng xuất hiện bên trái. Kéo các phần tử trong bảng Layers để sắp xếp lại thứ tự, hoặc dùng thao tác layer Move Up và Move Down.

Căn chỉnh

Lưới căn chỉnh kiểm soát vị trí của các phần tử con dọc theo trục cross của container. Trong container dọc, căn chỉnh điều khiển vị trí ngang của các phần tử con (trái, giữa, hoặc phải). Trong container ngang, nó điều khiển vị trí dọc (trên, giữa, hoặc dưới).

Phân bổ

Phân bổ xác định cách chia không gian giữa các phần tử con dọc theo trục chính:

• Gap (mặc định): Giá trị pixel cố định giữa các phần tử con liền kề
• Space Between: Các phần tử con trải ra đến các cạnh; khoảng cách bằng nhau xuất hiện giữa chúng
• Space Around: Khoảng cách bằng nhau bao quanh mỗi phần tử con, với khoảng cách nửa kích thước ở các cạnh
• Space Evenly: Khoảng cách bằng nhau trước, giữa và sau tất cả các phần tử con

Cắt nội dung

Cắt bỏ phần nội dung vượt ra ngoài ranh giới của container. Tắt tùy chọn này để cho phép tràn nội dung (ví dụ: một badge cố tình vượt ra ngoài cạnh card).

Vị trí

Theo mặc định, vị trí của mọi phần tử được xác định tự động bởi layout của container chứa nó. Nút bật/tắt Position cho phép bạn thoát khỏi flow thông thường và định vị thủ công.

Relative (mặc định)

Phần tử ở trong flow layout thông thường. Vị trí của nó được xác định tự động theo quy tắc layout của container cha — bạn không thể kéo tự do. Dùng Margin để điều chỉnh khoảng cách xung quanh phần tử relative.

Dùng vị trí relative cho phần lớn nội dung: khối văn bản, hình ảnh, card, nút và mục danh sách.

Absolute

Phần tử thoát khỏi flow thông thường và phủ lên các nội dung khác. Nó không còn ảnh hưởng đến layout của các phần tử lân cận.

Khi bạn chọn Absolute, các điều khiển bổ sung sẽ xuất hiện:

• Các trường Offset (T, L, R, B): Đặt khoảng cách tính bằng pixel từ phần tử đến mỗi cạnh của container cha
• Lưới Anchor: Nhấp vào một điểm trên lưới 3×3 để chọn góc, cạnh hoặc tâm của container cha mà phần tử neo vào
• Anchor ngang (Left / Center / Right) và Anchor dọc (Top / Center / Bottom): Dropdown điều khiển cùng điểm neo như lưới
• Z-index: Trường số điều khiển thứ tự xếp chồng của phần tử so với các phần tử anh em. Giá trị cao hơn sẽ hiển thị ở trên cùng

Dùng vị trí absolute cho các overlay trang trí, badge, nút đóng và icon đặt trên hình ảnh.

Fixed

Phần tử bỏ qua hoàn toàn container cha và ghim vào viewport của thiết bị. Nó vẫn hiển thị khi người dùng cuộn — nội dung trang di chuyển bên dưới nó.

Vị trí fixed dùng các điều khiển tương tự Absolute (offset, lưới anchor, Z-index). Tất cả offset đều tính từ cạnh màn hình thay vì từ container cha.

Dùng vị trí fixed cho các nút sticky ở dưới cùng, thanh điều hướng nổi và header cố định.

Kích thước

Mỗi phần tử có điều khiển Width và Height. Nhấp vào dropdown để chọn chế độ kích thước:

• Fill: Phần tử kéo giãn để chiếm toàn bộ không gian có sẵn trong container cha. Giá trị pixel hiển thị là kết quả được tính toán.
• Hug: Phần tử co lại để vừa với nội dung của nó. Giá trị pixel hiển thị là kết quả được tính toán.
• Fixed: Phần tử sử dụng chính xác giá trị pixel bạn chỉ định, bất kể kích thước cha hay nội dung. Chế độ duy nhất có thể dùng cho các phần tử với vị trí absolute hoặc fixed.

Khoảng cách

Đặt giá trị khoảng cách độc lập cho mỗi cạnh của phần tử.

• Margin: Khoảng cách giữa phần tử và các phần tử lân cận. Không vượt ra ngoài ranh giới của container cha, bất kể giá trị là bao nhiêu.
• Padding: Khoảng cách giữa ranh giới phần tử và nội dung của nó.

Phần tử văn bản chỉ có margin. Màn hình chỉ có padding. Cả hai đều có sẵn cho container và các phần tử khác có nội dung con.

Thứ tự xếp chồng

Các phần tử relative không bao giờ chồng lên nhau — mỗi container sắp xếp các phần tử con theo thứ tự. Sự chồng lấp chỉ xảy ra khi một phần tử thoát khỏi flow thông thường với vị trí Absolute hoặc Fixed.

Khi các phần tử chồng lên nhau, các phần tử anh em xuất hiện sau trong bảng Layers sẽ hiển thị trên các phần tử xuất hiện trước — kể cả khi phần tử sau là relative và phần tử trước là absolute.

Các phần tử Absolute và Fixed có trường Z-index để kiểm soát chi tiết hơn: giá trị cao hơn sẽ thắng. Các phần tử relative không có Z-index — chỉ thứ tự layer xác định vị trí xếp chồng của chúng.

Dùng thao tác layer Move up và Move down để thay đổi thứ tự phần tử.