---
title: "Vị trí phần tử"
description: "Sắp xếp các phần tử trên màn hình với layout, chế độ vị trí, kích thước và khoảng cách."
---

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

:::link
Về các thuộc tính hiển thị như fill, đường viền và hiệu ứng, xem [Tạo kiểu phần tử](builder-styling).
:::

## Layout \{#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](builder-containers#containers)**: Sắp xếp các phần tử con từ trên xuống dưới
* **[Horizontal Container](builder-containers#containers)**: Sắp xếp các phần tử con từ trái sang phải
* **[Divider](builder-containers#dividers)**: Đường phân cách trực quan giữa các phần tử
* **[Carousel](builder-containers#carousel)**: Tập hợp các slide có thể cuộn ngang
* **[Bottom Sheet](builder-containers#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](paywall-layout-and-products#layer-actions) **Wrap**. Để xóa container và đưa các phần tử con lên cấp trên, dùng **Unwrap**.

:::link
Về chi tiết cấu trúc màn hình và layer, xem [Màn hình và Layer](paywall-layout-and-products).
:::

### Hướng \{#direction\}

* Free **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 **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 **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ử \{#element-order\}

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](paywall-layout-and-products#layer-actions) **Move Up** và **Move Down**.

### Căn chỉnh \{#alignment\}

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ổ \{#distribution\}

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** 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 \{#clip-content\}

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í \{#position\}

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) \{#relative-default\}

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 \{#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** Horizontal positioning (Left / Center / Right) và **Anchor dọc** Vertical positioning (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](#stacking-order) 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.

:::tip
Để kéo giãn một phần tử absolute theo toàn bộ chiều rộng của container cha, đặt anchor ngang thành **Left**, sau đó thêm offset **Right** bằng 0. Phần tử sẽ ghim vào cả hai cạnh.
:::

### Fixed \{#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 \{#sizing\}

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 \{#spacing\}

Đặ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 \{#stacking-order\}

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](paywall-layout-and-products#layer-actions) **Move up** và **Move down** để thay đổi thứ tự phần tử.