Appearance

Home › Overview › Flux

Layout ​

Types ​

Reactive type ​

luau
type Reactive<T> = Graph.Reactive<T>

Length type ​

luau
type Length = number | UDim

Insets type ​

luau
type Insets = { top: number?, bottom: number?, left: number?, right: number? }

Align type ​

luau
type Align = "start" | "center" | "end"

FlexAlign type ​

luau
type FlexAlign = Align | "between" | "around" | "evenly" | "stretch" | "fill" | "none"

LineAlign type ​

luau
type LineAlign = Align | "stretch" | "automatic"

Direction type ​

luau
type Direction = "x" | "y"

FlexMode type ​

luau
type FlexMode = "fill" | "grow" | "shrink" | "none"

PaddingSides type ​

luau
type PaddingSides = {
	top: Reactive<Length>?,
	bottom: Reactive<Length>?,
	left: Reactive<Length>?,
	right: Reactive<Length>?,
	x: Reactive<Length>?,
	y: Reactive<Length>?,
}

ListConfig type ​

luau
type ListConfig = {
	gap: Reactive<Length>?,
	direction: Reactive<Direction | Enum.FillDirection>?,
	align: Reactive<FlexAlign>?,
	justify: Reactive<FlexAlign>?,
	horizontalAlign: Reactive<FlexAlign | Enum.HorizontalAlignment | Enum.UIFlexAlignment>?,
	verticalAlign: Reactive<FlexAlign | Enum.VerticalAlignment | Enum.UIFlexAlignment>?,
	lineAlign: Reactive<LineAlign | Enum.ItemLineAlignment>?,
	wraps: Reactive<boolean>?,
}

GridConfig type ​

luau
type GridConfig = {
	cell: Reactive<number | Vector2 | UDim2>?,
	gap: Reactive<number | Vector2 | UDim2>?,
	fill: Reactive<Direction | Enum.FillDirection>?,
	align: Reactive<Align | Enum.HorizontalAlignment>?,
	justify: Reactive<Align | Enum.VerticalAlignment>?,
	maxCells: Reactive<number>?,
}

StrokeConfig type ​

luau
type StrokeConfig = {
	thickness: Reactive<number>?,
	color: Reactive<Color3>?,
	transparency: Reactive<number>?,
	mode: Reactive<"contextual" | "border" | Enum.ApplyStrokeMode>?,
	joins: Reactive<"round" | "bevel" | "miter" | Enum.LineJoinMode>?,
}

Functions ​

padding ​

luau
Layout.padding(value: Length | PaddingSides | Graph.Node<any> | (() -> Length | Insets)): UIPadding

Creates a UIPadding from a single length (applied to all sides), a per-side { top, bottom, left, right, x, y } table, or a reactive node or function yielding a length or a { top, bottom, left, right } struct such as Flux.safeArea. Plain number values are offset pixels; a UDim is used as-is. Reactive sides bind and update in place; a reactive source may change shape between updates, and nil reads as no padding.

Open Documentation

corner ​

luau
Layout.corner(radius: Reactive<Length>?): UICorner

Creates a UICorner rounding the parent's corners. radius is offset pixels or a UDim, optionally reactive; omit it for the engine default (8 px).

Open Documentation

stroke ​

luau
Layout.stroke(config: StrokeConfig?): UIStroke

Creates a UIStroke outlining the parent. thickness (px), color, and transparency bind reactively; mode is "contextual" (text outline on text objects, border otherwise) or "border", and joins is "round"/"bevel"/"miter", each also accepting the raw Enum or a reactive source.

Open Documentation

aspectRatio ​

luau
Layout.aspectRatio(ratio: Reactive<number>, aspectType: Reactive<"fit" | "scale" | Enum.AspectType>?, dominantAxis: Reactive<"width" | "height" | Enum.DominantAxis>?): UIAspectRatioConstraint

Creates a UIAspectRatioConstraint constraining a frame's width-to-height ratio. Every argument may be reactive.

Open Documentation

Parameters

  • ratio: The aspect ratio; may be a static number or a reactive node.
  • aspectType: "fit" (FitWithinMaxSize) or "scale" (ScaleWithParentSize), or a raw Enum.AspectType.
  • dominantAxis: "width" or "height", or a raw Enum.DominantAxis; an unknown string warns and falls back.

list ​

luau
Layout.list(config: ListConfig?): UIListLayout

Creates a UIListLayout that arranges siblings in a line with flexbox semantics. gap is the spacing between items (offset px or a UDim); direction is "x"/"y". align sets the cross-axis and justify the main-axis value: "start"/"center"/"end" align items, "between"/"around"/"evenly" distribute the free space, and "stretch"/"fill" resize items to fill the axis. horizontalAlign/verticalAlign are explicit axis-pinned overrides, wraps flows items onto multiple lines, and lineAlign aligns items within their wrapped line. Every value, including direction, may be reactive; alignments re-route when a reactive direction flips.

Open Documentation

grid ​

luau
Layout.grid(config: GridConfig?): UIGridLayout

Creates a UIGridLayout that arranges siblings in a uniform grid. cell is the cell size and gap the spacing, each a Vector2, a number (offset px), or a UDim2. fill is the flow direction "x"/"y"; align/justify map to horizontal/vertical alignment; maxCells caps cells per line. Every value may be reactive.

Open Documentation

flex ​

luau
Layout.flex(mode: Reactive<FlexMode | Enum.UIFlexMode>?): UIFlexItem

Creates a UIFlexItem controlling how a child grows or shrinks inside a flex UIListLayout. mode is "fill" (the default when omitted), "grow", "shrink", or "none", or a raw Enum.UIFlexMode, optionally reactive.

Open Documentation