指定 flex 元素在主轴方向上的 flex 增长系数。是 $[0, 100]$ 间的整数，默认值为 $0$ 。如果主轴方向上有剩余空间，各元素将增长按照增长系数比例所分配的剩余空间。因此，如果元素的 flex-grow 都为 $1$ 那么它们将平分主轴的剩余空间，而增长系数为 $0$ 的元素不会增长。

`flex-shrink`

指定 flex 元素在主轴方向的收缩率。是 $[0, 100]$ 间的整数，默认值为 $1$ 。如果主轴的剩余空间不足将对元素进行收缩。实际缩小的尺寸由元素初始尺寸、元素自己的收缩率占所有元素搜索率之和的比例，以及剩余空间共同决定。元素的收缩率越大或初始尺寸越大，那么该元素将产生更多的收缩尺寸。flex-shrink 为 $0$ 的元素不会收缩。

`flex`

flex 是 flex-grow 和 flex-shrink 的简写。语法为

flex: <flex-grow> <flex-shrink>;

目前 Glyphix 没有引入 flex-basis 属性，因此不需要填写额外的值。

`line-height` 继承

该属性用于设置多行元素的空间量，如多行文本的间距。line-height 属性被指定为一个单一的长度值。

默认值：默认继承自父控件的行高。

提示

line-height 的实现只支持 1000px 以内的行高，过大的行高会导致渲染错误。

`max-height`(暂未支持)

设置元素的最大高度（max-height 属性不包括填充，边框，或页边距）。max-height 属性被指定为一个单一的长度值。

默认值：父控件的最大高度

`max-width`(暂未支持)

设置元素的最大宽度（max-width属性不包括填充，边框，或页边距）。max-width 属性被指定为一个单一的长度值。

默认值：父控件的最大宽度

`min-height`(暂未支持)

设置元素的最低高度（min-height属性不包括填充，边框，或页边距）。min-height 属性被指定为一个单一的长度值。

默认值：0

`min-width`(暂未支持)

设置元素的最小宽度（min-width 属性不包括填充，边框，或页边距）。min-width 属性被指定为一个单一的长度值。

默认值：0

定位方式

`position`

指定一个元素在文档中的定位方式。可以设置为以下值：

static：默认值，指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 属性无效。
absolute：元素会被移出正常文档流，并不为元素预留空间。通过指定元素相对于父元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins）。

`left`

指定元素相对于其包含元素左边缘的偏移量。

left 属性的值是一个 CSS 长度，默认值是 auto。

`right`

指定元素相对于其包含元素右边缘的偏移量。

right 属性的值是一个 CSS 长度，默认值是 auto。

`top`

指定元素相对于其包含元素顶部边缘的偏移量。

top 属性的值是一个 CSS 长度，默认值是 auto。

`bottom`

指定元素相对于其包含元素底部边缘的偏移量。

bottom 属性的值是一个 CSS 长度，默认值是 auto。

文本和字体

基本属性

`font-family` 继承

为元素指定一个有先后顺序的，有名字组成的字体族列表。多个字体之间使用逗号分隔，如果字体名字中存在空格还需要用引号包含字体名：

font-family: serif;
font-family: "Times New Roma", serif;

字体名由 @font-face 规则定义。如果不定义 font-family，元素将继承父级元素的字体族，如果父级都没有定义字体族将使用系统默认字体。

`font-size` 继承

指定元素的字体大小，是一个长度值。和 font-family 类似，font-size 也会从父级元素继承，在所有父级元素都没有定义字体大小的时候将使用系统默认字体的字号。

`font-weight` 继承

指定元素的字重，即字体的粗细。值的范围是 $[100, 900]$ 的整数，默认值是 400。如果父级元素没有定义字重，则使用默认的 400 字重。如果找不到指定的字重，系统会使用最接近的可用字重。

提示

font-weight 属性只支持 100 的整数倍数值，例如 100、200、300 等。带有余数的值（如 450）会被四舍五入到最接近的整倍数。目前发售的设备仅支持 400 字重。

`text-align` 继承

定义文字如何相对它的块父元素对齐，text-align 并不控制块元素自己的对齐，只控制它行内文本的对齐。

支持以下值：

left: 左对齐
right: 右对齐
hcenter: 水平居中对齐
justify: 自定调整
top: 顶对齐
bottom: 底对齐
vcenter: 垂直居中对齐
baseline: 基线对齐
center: 水平垂直对齐

默认值：left

`max-lines`

指定文本最多显示多少行，溢出的内容按照 text-overflow 指定的方式处理。值类型为 number，默认值是 0，表示不限制最大行数。

语法和示例：

max-lines: 0; /* 不限制最大行数 */
max-lines: 1; /* 固定为单行显示 */
max-lines: 2; /* 最多显示 2 行文本 */
max-lines: <number>; /* 指定最多可显示的文本行数 */

该属性兼容快应用标准的 lines 属性。

`text-overflow`

指定如何提示用户存在隐藏的溢出文本内容。可以直接裁剪或是显示一个省略号（...）。该属性配合 max-lines 使用，即只在文本行数达到 max-lines 限制时触发溢出行为，其他因为布局高度限制导致的裁剪则不会被考虑。

属性值：

clip：溢出的文本直接被隐藏；
ellipsis：当文本溢出时会在显示的文本后面添加省略号。

默认值：clip

正在加载模拟器...

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

div {
  display: flex;
}

p {
  background-color: #ddd;
  margin: 8px;
  padding: 8px;
  max-lines: 2;
}

.ellipsis {
  text-overflow: ellipsis;
}

`@font-face` 规则

@font-face CSS at-rule 指定一个用于显示文本的自定义字体。该字体可以在 font-family 属性中作为字体名使用。

@font-face {
  font-family: sans-serif;
  src: url("fonts/Roboto-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

建议在应用级字体映射文件中定义 @font-face 规则。本节介绍 @font-face 规则块中的属性定义。

`font-family`

所指定的字体名字将会被用于 font-family 属性。注意这里只能是一个字体名，而不是字体名的列表。例如：font-family: <family-name>。

`src`

指定字体文件的 URI，该属性的值是一个列表，允许开发者为字体指定多个字体文件。例如

src: url("fonts/Roboto-Regular.ttf"), url("font/Other-Font.ttf");

目前 src 属性只支持 url() 函数或者字符串列表，Web 中可用的 local()、format() 等函数不受支持。

动画

有关动画的更多知识请参考动画章节。

基础属性

`animation`

定义元素要执行动画效果。目前支持的格式如下：

animation: <name>;
animation: <duration> <timing> <name>;

各占位符描述如下：

<name>：一个由 @keyframes 规则定义的关键帧序列名；
<duration>：动画持续时间，单位为秒或者毫秒，例如 1000ms，0.2s，默认为 1s；
<timing>：缓动函数，默认为 ease。

`@keyframes` 规则

请参考 MDN 的 @keyframes 文档。

变换和显示效果

`transform`

transform 属性允许开发者旋转、缩放倾斜或者平移元素。该属性对元素施加视觉上的变换效果，并不会改变元素的布局属性。transform 属性的值可以是下表中各种变换函数的级联：

值	描述
`scale(x, y)`	缩放转换， $x$ 和 $y$ 分别指定元素水平和垂直方向的缩放比例。
`rotate(angle)`	旋转变换， $\it angle$ 指定旋转的角度，单位可以是 `deg` 或者 `rad`。
`shear(h, v)`	错切变换， $h$ 为水平方向的错切距离， $v$ 为垂直方向的错切距离。
`skew(angleX, angleY)`	沿着 $x$ 和 $y$ 轴的倾斜元素。
`translate(x, y)`	平变换移，沿着 $x$ 和 $y$ 轴移动元素。

例如下面的代码会将元素先缩放 $(2, 0.5)$ 倍，然后旋转 $100^{\circ}$ ：

transform: scale(2, 0.5) rotate(100deg);

默认值：none

变换后的元素可能会被父级元素裁剪，也可以被位于后面的元素遮挡。可以使用 z-index 属性提升元素的 Z 轴顺序，避免被同级别的元素遮挡。目前 transform 属性可能要配合 transparent 属性才能正常工作，否则可能会产生错误的黑色背景。

`z-index`

z-index 属性设置元素的 Z 轴顺序，z-index 较大的重叠元素会覆盖较小的元素。

`opacity`

该属性指定了一个元素的不透明度。是一个取值范围为 $[0, 1.0]$ 的数值。

默认值： $1.0$ （完全不透明）

注意

0 或 1 以外的 opacity 值会影响元素的绘制性能，建议仅在必要时使用该属性。如果只是需要使文本或背景呈现半透明，应该使用颜色值的 RGBA 格式来实现，例如 rgba(255, 0, 0, 0.5) 或 #ff000080 表示半透明的红色。

`object-fit`

用来指定图像应该如何适应到其使用高度和宽度确定的框的策略。

属性值：

none：默认值，图像将保持其原有的尺寸。
contain：图像将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比。
cover：图像在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
fill：图像正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。
scale-down：图像可以被保持长宽比地缩小以适应内容框的尺寸，但是当图像小于内容框的尺寸时不会进行缩放。scale-down 实际的缩放系数等效于 none 和 contain 中较小的那一个。

注

与 Web 标准不同，object-fit 属性的默认值是 none 而不是 fill。详情请参考 image 组件的说明。

`transparent`

设置元素是否透明。该属性通常不会影响元素的显示效果，但对存在快照的元素可能需要按照实际的透明情况配置此属性。

属性值：

false：标记此元素不透明；
true：标记元素是透明的。

默认值：false

`stroke-width`

指定某些组件绘制时的画笔宽度，例如 progress-arc。值的类型是一个长度。

`visibility` 继承

设置元素是否显示，该属性不会影响布局。

属性值：

hidden：隐藏元素；
visible：显示元素。

默认值：visible

`filter`

将模糊等效果应用于元素。目前支持这些值：

blur(<length>)：将模糊效果应用于元素，例如 blur(5px)。

实验性功能

在现有的设备上，使用 blur() 等过滤器效果可能会导致较严重的性能问题。需要注意的是，blur() 函数并非严格的高斯模糊，其模糊半径 $r$ 的支持范围为 $r \in [8, 300]\,\rm px$ 。具体来说：

当 $r \lt 8\rm px$ 时，不会产生模糊效果；
模糊程度随着 $r$ 的变化并不连续。

为了提升性能，在视觉效果允许的情况下，应尽量选择较大的模糊半径（建议 $r \ge 50\rm px$ ），这是因为 Glyphix 优化了这种情况。

由于模糊效果的开销较大，建议配合原生组件的 quiescent 属性来避免频繁的绘制更新。

颜色和背景

`color` 继承内联

设置元素的文本颜色（前景色），颜色值的语法请参考颜色值。

默认值： #ff0000

`background-color` 内联

指定背景颜色，和 background-image 属性互斥。颜色值的语法请参考颜色值。

默认值： #ff0000 (黑色背景)

`background-image`

设置背景图片，和 background-color 互斥。支持如下写法：

background-image: url("path/to/image")：url() 函数给出背景图片的 URI。

背景图片固定对齐到元素的右上角显示，并且不支持用类似 object-fit 类似的属性来拉伸或者缩放背景图片。对于此类复杂场景，建议使用 stack 和 image 元素的组合来实现。

边距和边框

`margin`

设置元素的在四个方向上的外边距。margin 属性接受 $1\sim4$ 个值，即如下写法

margin: x：将上、下、左、右边距的都设置为 x
margin: v h：将上、下边距设置为 v，左、右边距设置为 h
margin: t h b：将上边距设置为 t，下边距设置为 b，左、右边距设置为 h
margin: t r b l：将上、右、下、左边距宽度设置为 t、r、b、l

每个值的类型为长度。

默认值：0。在流式布局中，将块级元素的左、右边距设置为 auto 可以使边距占满容器的宽度，例如：

.center-box {
  margin: 0 auto;
}

会让类为 center-box 的块级元素在容器中居中。类似的，如果仅设置了左或者右边距为 auto，那么元素的该边距将会占满，产生居右或者居左的效果。

正在加载模拟器...

<div>
  <p class="auto">margin: 0 auto</p>
  <p class="left-auto">margin: 0 0 0 auto</p>
  <p class="right-auto">margin: 0 auto 0 0</p>
</div>

div {
  background-color: lightgreen;
}

.auto {
  margin: 0 auto;
}

.left-auto {
  margin: 0 0 0 auto;
}

.right-auto {
  margin: 0 auto 0 0;
}

div > p {
  border: 1px solid gray;
  margin-top: 4px;
  margin-bottom: 4px;
}

`margin-left`

设置元素的左外边距。

`margin-top`

设置元素的上外边距。

`margin-right`

设置元素的右外边距。

`margin-bottom`

设置元素的下外边距。

`padding`

设置元素的在四个方向上的内边距。padding 属性接受 $1\sim4$ 个值，即如下写法

padding: x：将上、下、左、右边距的都设置为 x
padding: v h：将上、下边距设置为 v，左、右边距设置为 h
padding: t h b：将上边距设置为 t，下边距设置为 b，左、右边距设置为 h
padding: t r b l：将上、右、下、左边距宽度设置为 t、r、b、l

每个值的类型为长度。

默认值：auto。在默认值下，元素的 padding 为 $0$ 。

`padding-left`

设置元素的左内边距。

`padding-top`

设置元素的上内边距。

`padding-right`

设置元素的右内边距。

`padding-bottom`

设置元素的下内边距。

`border`

设置元素的边框样式。支持如下写法：

border: <length>：表示轮廓宽度为 <length> ，颜色为黑色的边框；
border: solid：表示轮廓宽度为 1 px ，颜色为黑色的边框；
border: <length> solid <color>：表示轮廓宽度为 <length> ，颜色为 <color> 的边框。

其中 <length> 是一个长度，而 <color> 是一个颜色值。

Glyphix 只支持元素具有所有边框或者上、下、左、右边框之一。例如 border: solid 会让元素具有所有边框，而 border-top: solid 则让元素具有上边框。当 CSS 中同时存在这些边框属性时只有最后一个属性会生效。

<some-selector>:disabled {
  opacity: 0.5;
}

更完整的示例请参考 disabled 属性。