# Relative 布局

Lynx 特有的布局系统，类似于 Android 的 RelativeLayout。适用于需要相对定位的复杂布局。

## 核心概念

每个元素通过 `relative-id` 标识，然后引用其他元素的 ID 进行定位。

## 基本用法

```css
.container {
  display: relative;
  width: 100%;
  height: 400px;
}

/* 左上角头像 */
.avatar {
  relative-id: 1;
  relative-align-left: parent;
  relative-align-top: parent;
  width: 80px;
  height: 80px;
}

/* 用户名在头像右边 */
.username {
  relative-id: 2;
  relative-right-of: 1; /* 在 ID 1 的右边 */
  relative-align-top: 1; /* 顶部与 ID 1 对齐 */
}

/* 描述在用户名下方 */
.description {
  relative-id: 3;
  relative-right-of: 1;
  relative-bottom-of: 2; /* 在 ID 2 的下方 */
}

/* 关闭按钮右上角 */
.close {
  relative-id: 4;
  relative-align-right: parent;
  relative-align-top: parent;
}
```

```jsx
<view className="container">
  <image className="avatar" src="avatar.png" />
  <text className="username">Username</text>
  <text className="description">Description here</text>
  <text className="close">×</text>
</view>
```

## 对齐方式

```css
/* 水平居中 */
.center-horizontal {
  relative-id: 1;
  relative-center: horizontal;
}

/* 垂直居中 */
.center-vertical {
  relative-id: 1;
  relative-center: vertical;
}

/* 完全居中 */
.center-both {
  relative-id: 1;
  relative-center: both;
}
```

## 相对定位属性

| 属性                    | 说明           | 值                               |
| ----------------------- | -------------- | -------------------------------- |
| `relative-id`           | 元素唯一标识   | 数字                             |
| `relative-align-top`    | 顶部对齐       | parent 或 其他元素 ID            |
| `relative-align-bottom` | 底部对齐       | parent 或 其他元素 ID            |
| `relative-align-left`   | 左对齐         | parent 或 其他元素 ID            |
| `relative-align-right`  | 右对齐         | parent 或 其他元素 ID            |
| `relative-top-of`       | 位于某元素上方 | 其他元素 ID                      |
| `relative-bottom-of`    | 位于某元素下方 | 其他元素 ID                      |
| `relative-left-of`      | 位于某元素左侧 | 其他元素 ID                      |
| `relative-right-of`     | 位于某元素右侧 | 其他元素 ID                      |
| `relative-center`       | 居中           | none, vertical, horizontal, both |

### relative-center 可选值

| 值           | 说明             |
| ------------ | ---------------- |
| `none`       | 不居中（默认）   |
| `vertical`   | 垂直居中         |
| `horizontal` | 水平居中         |
| `both`       | 水平和垂直都居中 |

## 适用场景

- 卡片式布局（头像+文字+按钮）
- 聊天界面
- 复杂的表单项
- 任何需要"相对某个元素定位"的场景

## 注意事项

1. 每个 `relative-id` 在同一父容器内必须唯一
2. 循环引用会导致布局错误（A 依赖 B，B 又依赖 A）
3. 如果不设置任何相对属性，元素会堆叠在左上角

## 高级用法

### RTL 支持（Lynx 2.0+）

对于需要适配从右到左（RTL）语言（如阿拉伯语、希伯来语）的布局，可以使用逻辑方向属性：

| 物理方向               | 逻辑方向（推荐）              |
| ---------------------- | ----------------------------- |
| `relative-align-left`  | `relative-align-inline-start` |
| `relative-align-right` | `relative-align-inline-end`   |
| `relative-left-of`     | `relative-inline-start-of`    |
| `relative-right-of`    | `relative-inline-end-of`      |

```css
/* 推荐：使用逻辑方向，自动适配 RTL */
.card {
  display: relative;
}

.avatar {
  relative-id: 1;
  relative-align-inline-start: parent; /* LTR时左对齐，RTL时右对齐 */
  relative-align-top: parent;
}

.username {
  relative-id: 2;
  relative-inline-start-of: 1; /* LTR时在左边，RTL时在右边 */
  relative-align-top: 1;
}
```

### relative-layout-once（内部属性）

```css
.container {
  relative-layout-once: true; /* 默认值，优化性能 */
}
```

> **注意**: 这是内部优化属性，通常不需要手动设置。

## 实际案例：聊天消息

```css
.chat-message {
  display: relative;
  padding: 12px;
}

.avatar {
  relative-id: 1;
  relative-align-left: parent;
  relative-align-top: parent;
  width: 40px;
  height: 40px;
}

.username {
  relative-id: 2;
  relative-right-of: 1;
  relative-top-of: 3;
  margin-left: 8px;
}

.message-bubble {
  relative-id: 3;
  relative-right-of: 1;
  relative-bottom-of: 2;
  margin-left: 8px;
  margin-top: 4px;
}
```