Home › Overview › MainModule › Flux

Layout

Layout instances with friendly, reactive arguments: padding, corner, stroke, list, grid, flex, gradient, aspectRatio, sizeConstraint, textSizeConstraint. Each is flat on Flux.

Flux.new "Frame" { Flux.list { gap = 8, align = "center" }, Flux.corner(12) }

Types

Length type

type Length = number | UDim

ReactiveLength type

type ReactiveLength = Reactive<number> | Reactive<UDim>

Insets type

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

Align type

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

FlexAlign type

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

LineAlign type

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

Direction type

type Direction = "x" | "y"

FlexMode type

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

PaddingSides type

type PaddingSides = {
	top: ReactiveLength?,
	bottom: ReactiveLength?,
	left: ReactiveLength?,
	right: ReactiveLength?,
	x: ReactiveLength?,
	y: ReactiveLength?,
}

ListConfig type

type ListConfig = {
	gap: ReactiveLength?,
	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

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

type StrokeConfig = {
	thickness: Reactive<number>?,
	color: Reactive<Color3>?,
	transparency: Reactive<number>?,
	mode: Reactive<"contextual" | "border" | Enum.ApplyStrokeMode>?,
	joins: Reactive<"round" | "bevel" | "miter" | Enum.LineJoinMode>?,
	position: Reactive<"inner" | "center" | "outer" | Enum.BorderStrokePosition>?,
	offset: Reactive<number | UDim>?,
}

CornerSides type

type CornerSides = {
	radius: ReactiveLength?,
	topLeft: ReactiveLength?,
	topRight: ReactiveLength?,
	bottomLeft: ReactiveLength?,
	bottomRight: ReactiveLength?,
	top: ReactiveLength?,
	bottom: ReactiveLength?,
	left: ReactiveLength?,
	right: ReactiveLength?,
}

GradientConfig type

type GradientConfig = {
	color: Reactive<Color3 | ColorSequence | { Color3 }>?,
	transparency: Reactive<number | NumberSequence | { number }>?,
	rotation: Reactive<number>?,
	offset: Reactive<Vector2>?,
	enabled: Reactive<boolean>?,
}

SizeConstraintConfig type

type SizeConstraintConfig = {
	min: Reactive<Vector2>?,
	max: Reactive<Vector2>?,
	minWidth: Reactive<number>?,
	minHeight: Reactive<number>?,
	maxWidth: Reactive<number>?,
	maxHeight: Reactive<number>?,
}

TextSizeConstraintConfig type

type TextSizeConstraintConfig = {
	min: Reactive<number>?,
	max: Reactive<number>?,
}

Functions

padding

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. 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

Layout.corner(radius: ReactiveLength | CornerSides?): 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). A { topLeft, topRight, bottomLeft, bottomRight, top, bottom, left, right, radius } table rounds each corner on its own, for a card whose header meets its body or a button at the end of a group; a corner named nowhere keeps the engine default.

Open Documentation

stroke

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. For a border, position is "inner" (drawn inside the parent's box, so nothing around it clips it and a thicker stroke grows inward), "center" or "outer" (the engine default), and offset moves it out (px or a UDim; negative moves it in).

Open Documentation

aspectRatio

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 to ratio. aspectType accepts "fit" (FitWithinMaxSize), "scale" (ScaleWithParentSize), or an Enum.AspectType; dominantAxis accepts "width", "height", or an Enum.DominantAxis (unknown strings warn and fall back). Every argument may be reactive.

Open Documentation

list

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 and verticalAlign provide 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

Layout.grid(config: GridConfig?): UIGridLayout

Creates a UIGridLayout that arranges siblings in a uniform grid. cell is the cell size and gap is the spacing; each accepts 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

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

gradient

Layout.gradient(config: GradientConfig?): UIGradient

Creates a UIGradient. color takes a Color3, an array of stops spread evenly from start to end, or a ColorSequence; transparency takes a number, an array of stops, or a NumberSequence. rotation is in degrees, and offset and enabled map straight through. Every value may be reactive; a reactive stop array re-spreads when it changes.

Open Documentation

sizeConstraint

Layout.sizeConstraint(config: SizeConstraintConfig?): UISizeConstraint

Creates a UISizeConstraint bounding its parent's size. min and max are whole Vector2 bounds; minWidth, minHeight, maxWidth, and maxHeight set a single axis and win over the matching vector component. An axis not specified in config remains unconstrained. Every value may be reactive.

Open Documentation

textSizeConstraint

Layout.textSizeConstraint(config: TextSizeConstraintConfig?): UITextSizeConstraint

Creates a UITextSizeConstraint bounding the text size of its parent to min/max pixels; an omitted bound keeps the engine default (1 and 100). A max also caps the enlargement players get from a larger preferred text size. Both values may be reactive.

Open Documentation