---
title: 布局与样式
description: BlueOS 只用 flex 布局，CSS 是 Web 子集。优先 Tailwind utilities。
---
这篇讲手表屏幕上怎么排版，以及哪些 CSS 写了也不会生效。
**学完能做什么：** 用列 flex 和 Tailwind 搭出居中、可扫读的一屏；避开 `gap` / `grid` / `vh`。
**前置：** [`.ux` 与 `manifest`](/guide/ux-and-manifest/)。
## 单位
大小类样式按 **设计基准宽度** 缩放。样式文档默认基准是 **750px**；`manifest.json` 里 `config.designWidth` 建议手表用 **466**。以你工程 manifest 为准。单位用 `px` 或 `%`，没有 `rem` / `em` / `vw` / `vh`。
详见 [style 样式](/reference/configuration/style-sheet/)。
## 只有 flex
`display` 只支持 `flex` 和 `none`。没有 `block`、`inline-block`、`grid`。
手表一屏通常是列方向：
```html
标题
副标题
```
间距用子元素 `margin`（例如 `mt-10`），**不要写 `gap-*`**。`:last-child` 也不支持。
## Tailwind
优先 utilities，并在 `