#display

#介绍

Lynx 的 display 只决定了元件内部的显示类型（如何布局子元件），不参与决定外部显示类型（元件是否被视为块级元件或行级元件）。

Lynx 没有流式布局（Flow），不支持 display: block、display: inline 的语法。Lynx 元件都是块级元件，除了在 <text> 组件内的元件。

#使用示例

<Go/>

css-apisrc/display/App.tsx

Code

预览

#取值

#flex

见弹性布局。

#linear

指定容器采用线性布局。线性布局在 Lynx 所有布局中性能表现最佳。

#none

此元件不会显示。

#grid

指定容器采用网格布局。

#relative

Lynx 自研的布局模型。指定容器采用相对布局。相对布局是一个以相对位置显示子视图的布局方式，每个视图的位置可以指定为相对于同级元件的位置（例如，在另一个视图的左侧或下方）或相对于父级区域的位置（例如在底部、左侧或中心对齐）。

#语法

display: flex;
display: none;
display: linear;
display: relative;
display: grid;

#形式定义

#形式语法

display = none | linear | flex | grid | relative

#与 Web 的区别

• 线性布局和相对布局是 Lynx 自研的布局模型。
• Lynx 的 display 只决定了元件内部的显示类型（如何布局子元件），不参与决定外部显示类型（元件是否被视为块级元件或行级元件）；
• 不支持 block、inline、inline-block、inline-flex、inline-grid 等预组合值；

#兼容性

#常见问题

• <scroll-view> 会被强制指定为线性布局，此时 <scroll-view> 会被当作一个普通的线性布局进行布局，对齐属性和 linear-weight 都会生效。而且 scroll-x/scroll-y 会分别把主轴方向改成横向、竖向。（实际是通过是否设置 scroll-x/scroll-y 而进行强制转化判定。）