外观
工具类
约 865 字大约 3 分钟
2025-11-29
ETAF 内置了一套 tailwindcss 风格的工具类,可以直接设置到 ETML 的 class 属性中,减轻了用户手写 CSS 样式的负担。以下是目前支持的工具类:
flexbox layout
布局类型
| 类名 | 样式 | 含义 |
|---|---|---|
| flex | display: flex; | 使用 flex 布局 |
| inline-flex | display: inline-flex; | 使用 inline-flex 布局 |
方向与换行
| 类名 | 样式 | 含义 |
|---|---|---|
| flex-row | flex-direction: row; | |
| flex-row-reverse | flex-direction: row-reverse; | |
| flex-col | flex-direction: column; | |
| flex-col-reverse | flex-direction: column-reverse; | |
| flex-nowrap | flex-wrap: nowrap; | |
| flex-wrap | flex-wrap: wrap; | |
| flex-wrap-reverse | flex-wrap: wrap-reverse; |
弹性控制
| 类名 | 样式 | 含义 |
|---|---|---|
| grow | flex-grow: 1; | |
grow-<number> | flex-grow: <number>; | |
| shrink | flex-shrink: 1; | |
shrink-<number> | flex-shrink: <number>; | |
basis-<number> | flex-basis: <number>px | |
| basis-full | flex-basis: 100%; | |
| basis-auto | flex-basis: auto; | |
flex-<number> | flex: <number> <number> 0%; | 按比例等分剩余空间 |
| flex-auto | flex: 1 1 auto; | 内容决定,可伸缩(自适应布局) |
| flex-initial | flex: 0 1 auto; | 自然大小,只收缩(按钮、图标) |
| flex-none | flex: none; | 完全固定大小 |
- flex 是复合属性:
<grow><shrink><basis>;
容器对齐
| 属性 | 作用对象 | 布局系统 | 主要功能 |
|---|---|---|---|
| align-content | 多行内容 | Flexbox/Grid | 多行在交叉轴的对齐 |
| justify-content | 单行项目 | Flexbox/Grid | 项目在主轴的对齐 |
| align-items | 单行项目 | Flexbox/Grid | 项目在交叉轴的对齐 |
| justify-items | 网格项目 | 仅Grid | 项目在网格单元格内的对齐 |
| place-content | \ | \ | 复合属性: <align-content> <justify-content> |
| place-items | \ | \ | 复合属性: <align-items> <justify-items> |
几个对齐属性的含义
| 类名 | 样式 | 含义 |
|---|---|---|
| justify-start | justify-content: flex-start; | 起始对齐:向主轴的起始位置对齐 |
| justify-end | justify-content: flex-end; | 末尾对齐:向主轴的末尾位置对齐 |
| justify-center | justify-content: center; | 居中对齐:在主轴上居中对齐 |
| justify-between | justify-content: space-between; | 两端对齐:首元素贴起始位置,末元素贴末尾位置 |
| justify-around | justify-content: space-around; | 环绕对齐:每个子元素两侧的间隔相等 |
| justify-evenly | justify-content: space-evenly; | 均匀对齐:所有间隔完全相等 |
| justify-stretch | justify-content: stretch; | 拉伸对齐:在主轴方向上拉伸至填满容器 |
| justify-items-start | justify-items: start; | |
| justify-items-end | justify-items: end; | |
| justify-items-center | justify-items: center; | |
| justify-items-stretch | justify-items: stretch; | |
| content-center | align-content: center; | |
| content-start | align-content: flex-start; | |
| content-end | align-content: flex-end; | |
| content-between | align-content: space-between; | |
| content-around | align-content: space-around; | |
| content-evenly | align-content: space-evenly; | |
| content-stretch | align-content: stretch; | |
| items-start | align-items: flex-start; | |
| items-end | align-items: flex-end; | |
| items-center | align-items: center; | |
| items-stretch | align-items: stretch; | |
| place-content-center | place-content: center; | |
| place-content-start | place-content: start; | |
| place-content-end | place-content: end; | |
| place-content-between | place-content: space-between; | |
| place-content-around | place-content: space-around; | |
| place-content-evenly | place-content: space-evenly; | |
| place-content-stretch | place-content: stretch; | |
| place-items-start | place-items: start; | |
| place-items-end | place-items: end; | |
| place-items-center | place-items: center; | |
| place-items-stretch | place-items: stretch; |
行列间隔
| 类名 | 样式 | 含义 |
|---|---|---|
gap-<number> | gap: <number>lh <number>px; | |
gap-x-<number> | column-gap: <number>px; | |
gap-y-<number> | row-gap: <number>lh; |
子项控制
| 类名 | 样式 | 含义 |
|---|---|---|
order-<number> | order: <number>; | 子项排列顺序设置为 <number> |
| order-first | order: -9999; | 子项排列在第一个 |
| order-last | order: 9999; | 子项排列在最后一个 |
| self-auto | align-self: auto; | 基于容器的 align-items 属性对子项进行对齐 |
| self-start | align-self: flex-start; | |
| self-end | align-self: flex-end; | |
| self-center | align-self: center; | |
| self-stretch | align-self: stretch; | |
| place-self-auto | place-self: auto; | |
| place-self-start | place-self: start; | |
| place-self-end | place-self: end; | |
| place-self-center | place-self: center; | |
| place-self-stretch | place-self: stretch; |
- place-self 是复合属性:
<align-self><justify-self>;
