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>;