Layout

Layout utilities — position (relative/absolute + offsets), the full flexbox vocabulary (direction, grow/shrink, align, justify), and aspect-ratio classes.

Position

html
<!-- Position Relative --> <engine:VisualElement class="relative" /> <!-- Position Absolute--> <engine:VisualElement class="absolute" />

Top / Right / Bottom / Left

Format: top-{value} / right-{value} / bottom-{value} / left-{value}

Uses same length variables mentioned at Styling/Size.

html
<!-- set left --> <engine:VisualElement class="left-4" /> <!-- set right--> <engine:VisualElement class="right-10p" /> <!-- set top --> <engine:VisualElement class="top-full" /> <!-- set bottom --> <engine:VisualElement class="bottom-20-neg" />

⚠️ These classes resolve through var(--length-N), and current Luna builds no longer ship the --length-* definitions. Define them in your own USS — copy-paste block on Size → USS variables — or the pixel-valued offset classes won't take effect. (The percentage variants like right-10p use literal values and work as-is — except the -80p ones: all eight left/right/top/bottom-80p classes ship as 580% and their -80p-neg counterparts as -580%. Write a one-line override, e.g. .left-80p { left: 80%; }, until fixed upstream.)

Flex

Flex Direction

html
<!-- flex-direction: row --> <engine:VisualElement class="flex-row" /> <!-- flex-direction: row-reverse --> <engine:VisualElement class="flex-row-reverse" /> <!-- flex-direction: column--> <engine:VisualElement class="flex-col" /> <!-- flex-direction: column-reverse --> <engine:VisualElement class="flex-col-reverse" />

Flex Grow & Shrink

Values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15.

html
<!-- flex-grow --> <engine:VisualElement class="grow-4" /> <engine:VisualElement class="grow-15" /> <!-- flex-shrink --> <engine:VisualElement class="shrink-0" /> <engine:VisualElement class="shrink-8" />

⚠️ Stick to 0–8 for now. The shipped stylesheet misdeclares the upper end of the scale: the selectors for grow-10…grow-15 and shrink-10…shrink-15 are all typo'd as .grow-9 / .shrink-9. The practical result: grow-9/shrink-9 currently resolve to 15 (last declaration wins), and grow-10 through grow-15 don't exist. Values 0–8 behave as named; for anything higher, write your own one-line rule until this is fixed upstream.

Align Items

ClassProperties
items-autoalign-items: auto
items-startalign-items: flex-start
items-endalign-items: flex-end
items-centeralign-items: center
items-stretchalign-items: stretch

Justify Content

ClassProperties
justify-startjustify-content: flex-start
justify-centerjustify-content: center
justify-endjustify-content: flex-end
justify-betweenjustify-content: space-between
justify-aroundjustify-content: space-around
justify-evenlyjustify-content: space-evenly

Align Self

ClassProperties
self-autoalign-self: auto
self-startalign-self: flex-start
self-endalign-self: flex-end
self-centeralign-self: center
self-stretchalign-self: stretch

Align Content

ClassProperties
align-autoalign-content: auto
align-startalign-content: flex-start
align-endalign-content: flex-end
align-centeralign-content: center
align-stretchalign-content: stretch

Aspect Ratio

Utility classes to set the aspect ratio of an element. These classes set the CSS aspect-ratio property.

ClassAspect Ratio
aspect-autoauto
aspect-square1 / 1
aspect-video16 / 9
aspect-1-11 / 1
aspect-1-21 / 2
aspect-2-12 / 1
aspect-2-32 / 3
aspect-3-23 / 2
aspect-3-43 / 4
aspect-4-34 / 3
aspect-4-54 / 5
aspect-5-45 / 4
aspect-9-169 / 16
aspect-16-916 / 9
aspect-21-921 / 9
html
<!-- Square aspect ratio --> <engine:VisualElement class="aspect-square" /> <!-- Video aspect ratio (16:9) --> <engine:VisualElement class="aspect-video" /> <!-- Custom 4:3 aspect ratio --> <engine:VisualElement class="aspect-4-3" />

See also

  • Size — width/height/margin/padding utilities + the --length-* variable block the position classes consume
  • Theme Stack — where your layout-related overrides belong in the @import chain
  • Text · Border · Colors — the rest of the utility-class set
  • UI Toolkit Basics — Layout — the flexbox model itself, for readers coming from uGUI anchors

Settings

Theme

Light

Contrast

Material

Dark

Dim

Material Dark

System

Sidebar(Light & Contrast only)

Light
Dark

Font Family

DM Sans

Wix

Inclusive Sans

AR One Sans

Direction

LTR
RTL