display#

#Introduction

In Lynx, the display only determines the internal display type of the element (how to layout the child elements), and does not determine the external display type (whether the element is considered a block-level element or an inline-level element).

Lynx does not have flow layout and does not support the display: block/inline syntax. All Lynx elements are block-level element, except for the elements inside the <text> component.

#Examples

css-apisrc/display/App.tsx

Preview

#Syntax

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

#Values

• flex

  See more in flexible box layout.

• linear

  linear layout is the default Layout model developed by Lynx. It has best performance in all types of layout in Lynx.

  Info

  <scroll-view> is forced to be a linear layout, in which case <scroll-view> is formatted as a normal linear view. Both the alignment attribute and linear-weight take effect. And scroll-x/scroll-y will change the main axis to horizontal and vertical respectively. (The actual conversion is determined by whether to set scroll-x/scroll-y.)

• none

  Element and its descents will be resized to 0x0.

  Info

  If the parent element of the <text> element is set to display:none and the <text> element is still rendered visible, please add overflow:hidden to the corresponding parent element. We will fix this issue in the future.

• grid

  Element will layout according to the grid layout layout model.

• relative

  Relative layout is a Layout model developed by Lynx.

  Element will layout according to the relative layout model. Relative layout is a layout that displays children in relative positions, where each view's position can be specified relative to sibling elements (for example, to the left or below another view) or relative to the parent's area (e.g. align at bottom, left or center).

#Formal definition

#Formal syntax

display = none | linear | flex | grid | relative

#Difference with the web

• In Lynx, the display only determines the internal display type of the element (how to layout the child elements), and does not determine the external display type (whether the element is considered a block-level element or an inline-level element).
• relative layout and linear layout are Layout models developed by Lynx.
• Lynx does not have flow layout and does not support the display: block/inline syntax. All Lynx elements are block-level element, except for the elements inside the <text> component.
• inline-block, inline-flex, inline-grid are not supported.

#Compatibility

#FAQ

• <scroll-view> is forced to be a linear layout, in which case <scroll-view> is formatted as a normal linear view. Both the alignment attribute and linear-weight take effect. And scroll-x/scroll-y will change the main axis to horizontal and vertical respectively. (The actual conversion is determined by whether to set scroll-x/scroll-y.)