Layout
Learn how to config layout and position in Momen
Last updated
Learn how to config layout and position in Momen
Last updated
Pages and container components come with default layout properties. You can adjust the layout settings to arrange components with a "relative" position type according to the specified rules, achieving your desired layout effect.
The extension direction of the layout.
Horizontal
Add, remove, and reorder objects along the X-axis.
Vertical
Add, remove, and reorder objects along the Y-axis.
You can freely adjust the distribution of child components within a page/container component and align them with reference to the parent.
Stack:
Space Between: The spacing between components is equal, but the first and last components are flush with the edges of the container.
Space Evenly: The spacing between components is equal, and the margins at both ends of the container are also equal.
Space Around: In space-around distribution, each component has equal spacing on both sides, making them appear "evenly surrounded." However, because the components at both ends only share spacing on one side with other components, the gaps between the ends and the container edges are smaller than the spacing between components.
When the content width exceeds the available space of the container, the content will adjust to the next line for arrangement.
The spacing settings between child components within a page or container component.
Scroll: When content overflows, a scrollbar appears on the parent, allowing you to scroll to view the overflowed content.
Visible: When content overflows, the overflowed part is visible on the parent.
Hidden: When content overflows, the overflowed part is hidden on the parent.
Relative: Components are arranged in an orderly manner according to the layout of their parent.
Absolute: Components are displayed at a fixed position based on two directions (top-left, top-right, bottom-left, bottom-right) of their parent.
Fixed: Components are displayed at a fixed position based on two directions (top-left, top-right, bottom-left, bottom-right) of the browser viewport, and remain in a fixed position even when the page scrolls.
The default layer of all components is "auto," meaning all components are on the same layer.
You can manually change the layer of a component (numerically), with higher values indicating a higher layer. Components on higher layers will cover those on lower layers.
Components on the same layer are presented in the order they are added, with later additions covering earlier ones.
