# Linear 布局（默认布局）

Linear 是 Lynx 的默认布局系统，类似于 Android 的 LinearLayout。当你不设置 `display` 属性时，默认使用 Linear 布局。

## 基本用法

```jsx
// 默认情况下，子元素垂直排列
<view className="container">
  <text>Item 1</text>
  <text>Item 2</text>
  <text>Item 3</text>
</view>
```

```css
.container {
  /* 无需设置 display，默认就是 linear */
  padding: 16px;
}
```

## 方向设置

```css
.row {
  display: linear;
  linear-orientation: horizontal; /* 或 row */
}
```

**linear-orientation 所有可选值**:

- `horizontal` / `row` - 水平排列
- `vertical` / `column` - 垂直排列（默认）
- `horizontal-reverse` / `row-reverse` - 水平反向排列
- `vertical-reverse` / `column-reverse` - 垂直反向排列

```jsx
<view className="row">
  <text>Left</text>
  <text>Center</text>
  <text>Right</text>
</view>
```

## 权重分配

使用 `linear-weight` 分配剩余空间：

```css
.container {
  display: linear;
  linear-orientation: horizontal;
}

.sidebar {
  width: 200px; /* 固定宽度 */
}

.main {
  linear-weight: 1; /* 占据剩余所有空间 */
}

.aside {
  linear-weight: 0.5; /* 占据 1/3 剩余空间 */
}
```

```jsx
<view className="container">
  <view className="sidebar">
    <text>Sidebar</text>
  </view>
  <view className="main">
    <text>Main Content</text>
  </view>
  <view className="aside">
    <text>Aside</text>
  </view>
</view>
```

## 对齐方式

```css
/* 子元素整体居中 */
.center-container {
  display: linear;
  linear-gravity: center;
}

/* 水平居中 */
.horizontal-center {
  display: linear;
  linear-gravity: center-horizontal;
}

/* 垂直居中 */
.vertical-center {
  display: linear;
  linear-gravity: center-vertical;
}

/* 子元素拉伸填满 */
.stretch-container {
  display: linear;
  linear-orientation: horizontal;
}

.stretch-container .item {
  linear-layout-gravity: stretch;
}
```

## 属性值参考

### linear-orientation

控制布局方向：

| 值                                    | 说明             |
| ------------------------------------- | ---------------- |
| `horizontal` / `row`                  | 水平排列         |
| `vertical` / `column`                 | 垂直排列（默认） |
| `horizontal-reverse` / `row-reverse`  | 水平反向         |
| `vertical-reverse` / `column-reverse` | 垂直反向         |

### linear-direction

**Lynx 2.2+** 替代 `linear-orientation` 的属性，语义更清晰：

| 值               | 说明             |
| ---------------- | ---------------- |
| `row`            | 水平排列         |
| `column`         | 垂直排列（默认） |
| `row-reverse`    | 水平反向         |
| `column-reverse` | 垂直反向         |

### linear-gravity（容器属性）

控制子元素在主轴上的对齐：

| 值                  | 说明                   |
| ------------------- | ---------------------- |
| `none`              | 无特殊对齐             |
| `top`               | 顶部对齐（垂直布局时） |
| `bottom`            | 底部对齐（垂直布局时） |
| `left`              | 左侧对齐（水平布局时） |
| `right`             | 右侧对齐（水平布局时） |
| `center-vertical`   | 垂直居中               |
| `center-horizontal` | 水平居中               |
| `center`            | 主轴居中               |
| `start`             | 主轴起点对齐           |
| `end`               | 主轴终点对齐           |
| `space-between`     | 两端对齐，中间等分     |

> **注意**: `top`/`bottom`/`left`/`right` 是物理方向值，会根据 `linear-orientation` 自动映射到逻辑方向。

### linear-layout-gravity（子元素属性）

控制单个子元素在交叉轴上的对齐：

| 值                  | 说明                  |
| ------------------- | --------------------- |
| `none`              | 无特殊对齐            |
| `top`               | 顶部对齐              |
| `bottom`            | 底部对齐              |
| `left`              | 左侧对齐              |
| `right`             | 右侧对齐              |
| `center-vertical`   | 垂直居中              |
| `center-horizontal` | 水平居中              |
| `center`            | 交叉轴居中            |
| `fill-vertical`     | 垂直方向填充          |
| `fill-horizontal`   | 水平方向填充          |
| `stretch`           | 拉伸填满（Lynx 1.6+） |
| `start`             | 起点对齐（Lynx 1.6+） |
| `end`               | 终点对齐（Lynx 1.6+） |

> **注意**: `stretch`、`fill-vertical`、`fill-horizontal` 是不同的值。`stretch` 是逻辑方向填充，根据布局方向自动决定。

### linear-cross-gravity（容器属性）

控制所有子元素在交叉轴上的默认对齐（Lynx 1.6+）：

| 值        | 说明       |
| --------- | ---------- |
| `none`    | 无特殊对齐 |
| `start`   | 起点对齐   |
| `end`     | 终点对齐   |
| `center`  | 居中对齐   |
| `stretch` | 拉伸填满   |

### linear-weight

数字类型，指定子元素占据剩余空间的比例。

```css
.item {
  linear-weight: 1; /* 占据一份剩余空间 */
}
```

### linear-weight-sum

**高级属性** 设置权重计算的总和。默认自动计算所有子元素 weight 之和。

```css
.container {
  linear-weight-sum: 100; /* 设置总权重为100 */
}

.item1 {
  linear-weight: 30; /* 占据 30% */
}

.item2 {
  linear-weight: 70; /* 占据 70% */
}
```

## Linear vs Flex 对比

| 特性       | Linear           | Flex               |
| ---------- | ---------------- | ------------------ |
| 性能       | 更快（简单场景） | 稍慢               |
| 换行       | 不支持           | 支持 wrap          |
| 多行对齐   | 不支持           | 支持 align-content |
| 子元素排序 | 不支持           | 支持 order         |
| 适用场景   | 简单列表         | 复杂弹性布局       |

**建议**: 简单列表用 Linear，复杂布局用 Flex。

## 与 Web Block Layout 的差异（迁移要点）

**这是从 Web 迁移到 Lynx 时最常见的陷阱之一**。

### 默认布局差异

| 特性                 | Web Block Layout                           | Lynx Linear Layout（默认）                     |
| -------------------- | ------------------------------------------ | ---------------------------------------------- |
| 默认 display         | `block`（flow layout）                     | `linear`（类似 flex column）                   |
| 子元素宽度           | 默认 `width: 100%`，自动填满父元素         | 默认由内容决定，**不会自动填满**               |
| 子元素高度           | 由内容决定                                 | 由内容决定                                     |
| 嵌套元素尺寸         | 继承父元素尺寸（逐层填满）                 | **不会自动继承**，需要显式设置                 |
| 空元素尺寸           | 可能为 0（取决于 overflow 和 min-height）  | **通常为 0**（无内容且无显式宽高时）           |

### 子元素尺寸问题示例

```css
/* Web: 子元素自动填满父元素 */
.parent { width: 200px; }
.child { /* 默认 width: 100%，实际 200px */ }

/* Lynx: 子元素不会自动填满 */
.parent { width: 200px; display: linear; }
.child { /* 默认宽度由内容决定，可能远小于 200px */ }

/* Lynx 修复方案 1：显式设置 width */
.child { width: 100%; }

/* Lynx 修复方案 2：使用 linear-layout-gravity */
.child { linear-layout-gravity: stretch; }

/* Lynx 修复方案 3：父元素设置 linear-cross-gravity */
.parent { linear-cross-gravity: stretch; }
```

### 嵌套元素尺寸问题示例

```css
/* Web: 嵌套 div 自动填满 */
.grandparent { width: 100px; height: 100px; }
.parent { /* 自动 100x100 */ }
.child { /* 自动 100x100 */ }

/* Lynx: 需要每层都显式设置 */
.grandparent { width: 100px; height: 100px; display: linear; }
.parent { width: 100%; height: 100%; }
.child { width: 100%; height: 100%; }

/* 或者使用 stretch */
.grandparent {
  width: 100px;
  height: 100px;
  display: linear;
  linear-cross-gravity: stretch;
}
```

## 常见布局模式

### 垂直列表

```css
.list {
  display: linear;
  /* 默认就是垂直 */
  gap: 12px;
  padding: 16px;
}

.list-item {
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 8px;
}
```

### 水平按钮组

```css
.button-group {
  display: linear;
  linear-orientation: horizontal;
  gap: 8px;
  padding: 16px;
}

.button-group .button {
  linear-weight: 1; /* 等分宽度 */
}
```

### 侧边栏 + 主内容

```css
.layout {
  display: linear;
  linear-orientation: horizontal;
  height: 100vh;
}

.sidebar {
  width: 250px;
}

.main {
  linear-weight: 1; /* 占据剩余空间 */
}
```

### 使用 linear-cross-gravity 的列表

```css
.list {
  display: linear;
  linear-orientation: horizontal;
  linear-cross-gravity: stretch; /* 所有子元素等高 */
}

.list-item {
  /* 子元素会自动拉伸到容器高度 */
}
```