orient 用法详解

1. 什么是 orient？

“orient” 通常指元素或设备的方向（orientation），在 Web 开发中有多种体现方式：

• CSS Flexbox 中的主轴方向（通过 flex-direction 控制）
• CSS 书写模式（writing-mode）决定文本流方向
• JavaScript 中的 DeviceOrientationEvent 获取设备物理方向
• SVG 中的 orient 属性（用于标记对齐）

2. CSS 中的方向控制

2.1 Flexbox 方向（flex-direction）

虽然没有叫 orient 的属性，但 flex-direction 实际上控制了 flex 容器的主轴方向：

/* 水平方向（默认） */
.container {
  display: flex;
  flex-direction: row;
}

/* 垂直方向 */
.container {
  display: flex;
  flex-direction: column;
}

2.2 书写模式（writing-mode）

控制文本的排版方向，常用于中文竖排或阿拉伯语从右向左：

/* 水平从左到右（默认） */
.text { writing-mode: horizontal-tb; }

/* 垂直从右向左（传统中文） */
.vertical-text { writing-mode: vertical-rl; }

/* 垂直从左向右 */
.vertical-lr { writing-mode: vertical-lr; }

3. JavaScript 获取设备方向

通过 DeviceOrientationEvent 可监听设备的物理朝向（alpha, beta, gamma）：

window.addEventListener('deviceorientation', function(event) {
  console.log('Alpha (Z轴):', event.alpha); // 0 ~ 360
  console.log('Beta (X轴):', event.beta);   // -180 ~ 180
  console.log('Gamma (Y轴):', event.gamma); // -90 ~ 90
});

4. SVG 中的 orient 属性

在 SVG 的 <marker> 元素中，orient 用于控制标记（如箭头）的旋转方式：

<marker id="arrow" orient="auto">
  <path d="M0,0 L10,5 L0,10 Z" />
</marker>

可选值：auto、auto-start-reverse 或具体角度（如 45deg）。

5. 常见误区

• ❌ 不存在全局 CSS 属性 orient —— 这是常见误解。
• ✅ 正确做法是根据场景选择 flex-direction、writing-mode 或 JS API。
• 📱 移动端检测屏幕方向应使用 screen.orientation 或 CSS 媒体查询：

@media (orientation: portrait) { /* 竖屏 */ }
@media (orientation: landscape) { /* 横屏 */ }