Source: Roblox Creator Hub · CC BY 4.0 · View source · Code samples: MIT Imported 2026-10-03. Formatting adapted for this site.
UIListLayout
Inherits from: UIGridStyleLayout → UILayout → UIComponent → UIBase → Instance → Object
A UIListLayout positions sibling UI elements in rows or columns within the parent UI container, based on the FillDirection. The Position and Rotation properties of each sibling GuiObject are either ignored or overridden by the list layout, while each sibling retains its defined Size unless the layout is configured to utilize a flex layout. See List and Flex Layouts for further information.
To control the layout order of siblings, set SortOrder to either SortOrder.Name or SortOrder.LayoutOrder, then rename siblings in alphanumerical order or set their LayoutOrder value, respectively. UIListLayout will automatically re‑layout elements when elements are added/removed, or if a sibling's Name or LayoutOrder changes.
Padding between siblings is controlled through the Padding property, and wrapping within the parent container's bounds through the Wraps boolean. Alignment of siblings within the parent container is controlled through HorizontalAlignment and VerticalAlignment unless the layout is configured to utilize a flex layout.
Note that there are performance implications of using a flex‑enabled list layout, since extra calculations are needed to calculate flex basis sizes, flexed sizes, and line wrapping. Flex is enabled on a UIListLayout when the following properties are set, or if any GuiObject sibling has a UIFlexItem parented to it:
HorizontalFlexand/orVerticalFlexare not set toUIFlexAlignment.None.ItemLineAlignmentis not set toItemLineAlignment.Automatic.Wrapsistrue.
Inherits from: UIGridStyleLayout
Memory category: Instances
Properties
| Name | Type / Returns | Description |
|---|---|---|
| UIListLayout.HorizontalFlex | UIFlexAlignment | Controls how to distribute extra horizontal space. |
| UIListLayout.ItemLineAlignment | ItemLineAlignment | In a flex layout, defines the cross-directional alignment of siblings within a line. |
| UIListLayout.Padding | UDim | Amount of free space between each element. |
| UIListLayout.VerticalFlex | UIFlexAlignment | Controls how to distribute extra vertical space. |
| UIListLayout.Wraps | boolean | Controls whether siblings within the parent container wrap. |
Inherited from UIGridStyleLayout
| Name | Type / Returns | Description |
|---|---|---|
| UIGridStyleLayout.AbsoluteContentSize | Vector2 | The absolute size of space being taken up by the grid layout. |
| UIGridStyleLayout.FillDirection | FillDirection | Determines the axis in which UI objects are laid out. |
| UIGridStyleLayout.HorizontalAlignment | HorizontalAlignment | Determines the horizontal alignment of UI elements within the parent element. |
| UIGridStyleLayout.SortOrder | SortOrder | Determines the order in which child UI objects are placed in a layout. |
| UIGridStyleLayout.VerticalAlignment | VerticalAlignment | Determines the vertical alignment of UI elements within the parent element. |
Inherited from Instance
| Name | Type / Returns | Description |
|---|---|---|
| Instance.Archivable | boolean | Determines if an Instance and its descendants can be cloned using Instance:Clone(), and can be saved/published. |
| Instance.archivable | boolean | |
| Instance.Capabilities | SecurityCapabilities | The set of capabilities allowed to be used for scripts inside this container. |
| Instance.IsInSandbox | boolean | Indicates whether the instance is inside a sandboxed container. |
| Instance.Name | string | A non-unique identifier of the Instance. |
| Instance.Parent | Instance | Determines the hierarchical parent of the Instance. |
| Instance.PredictionMode | PredictionMode | Reflects the client-side prediction mode applied to the instance under server-authoritative physics. |
| Instance.RobloxLocked | boolean | A deprecated property that used to protect CoreGui objects. |
| Instance.Sandboxed | boolean | When enabled, the instance can only access abilities in its Capabilities list. |
| Instance.UniqueId | UniqueId | A unique identifier for the instance. |
Inherited from Object
| Name | Type / Returns | Description |
|---|---|---|
| Object.ClassName | string | A read-only string representing the class this Object belongs to. |
| Object.className | string |
UIListLayout.HorizontalFlex
When the list layout's FillDirection is set to FillDirection.Horizontal, the HorizontalFlex property specifies how to distribute extra horizontal space in the parent container.
| Setting | Sibling Behavior |
|---|---|
Enum.UIFlexAlignment.None|None | No flex behavior; siblings maintain their defined width. |
Enum.UIFlexAlignment.Fill|Fill | Siblings resize horizontally to fill the entire parent container, overriding their defined width. The number of siblings in a row remain unchanged; for example, if three siblings fit horizontally within the container's width under the Enum.UIFlexAlignment.None|None setting, those three siblings will resize to fill the entire width. |
Enum.UIFlexAlignment.SpaceAround|SpaceAround | Siblings maintain their defined width. Equal spacing is added on both sides of each sibling. |
Enum.UIFlexAlignment.SpaceBetween|SpaceBetween | Siblings maintain their defined width. Equal spacing is added between siblings, but no additional space is added around siblings. |
Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly | Siblings maintain their defined width. Equal spacing is added both between and around siblings. |
Cross-Direction Behavior
In vertical list layouts (FillDirection set to FillDirection.Vertical), the HorizontalFlex property specifies how to distribute the siblings across the horizontal cross‑direction. In such layouts, a setting of UIFlexAlignment.Fill makes the siblings fill the entire horizontal space while vertical spacing adheres to VerticalFlex.
AutomaticSize Interaction
If GuiObject.AutomaticSize is enabled for a child of the UIListLayout in the FillDirection, it is interpreted as "automatic flex basis" and it defines the size of the GuiObject from which it can grow or shrink.
If GuiObject.AutomaticSize is enabled for a child of the UIListLayout in the cross‑direction, it is interpreted as "automatic cross size" and it defines the minimum size needed to contain all the child's content in the cross‑direction.
| Field | Value |
|---|---|
| type | UIFlexAlignment |
| security | {"read":"None","write":"None"} |
| thread safety | ReadSafe |
| category | Alignment |
| serialization | {"can_load":true,"can_save":true} |
| capabilities | ["UI"] |
UIListLayout.ItemLineAlignment
In a flex layout, defines the cross-directional alignment of siblings within a line. See ItemLineAlignment for visual examples.
| Setting | Sibling Behavior |
|---|---|
Enum.ItemLineAlignment.Automatic|Automatic | Aligns the layout's siblings or the specific Class.UIFlexItem parent to the layout's Class.UIListLayout.HorizontalAlignment|HorizontalAlignment or Class.UIListLayout.VerticalAlignment|VerticalAlignment, depending on its Class.UIListLayout.FillDirection|FillDirection. |
Enum.ItemLineAlignment.Start|Start | Aligns the layout's siblings or the specific Class.UIFlexItem parent to the line's top in a horizontal fill or the line's left in a vertical fill. |
Enum.ItemLineAlignment.Center|Center | Aligns the layout's siblings or the specific Class.UIFlexItem parent to the line's center in either a horizontal or vertical fill. |
Enum.ItemLineAlignment.End|End | Aligns the layout's siblings or the specific Class.UIFlexItem parent to the line's bottom in a horizontal fill or the line's right in a vertical fill. |
Enum.ItemLineAlignment.Stretch|Stretch | Stretches the layout's siblings or the specific Class.UIFlexItem parent to fill the entire cross‑direction of the line in either a horizontal or vertical fill. |
| Field | Value |
|---|---|
| type | ItemLineAlignment |
| security | {"read":"None","write":"None"} |
| thread safety | ReadSafe |
| category | Alignment |
| serialization | {"can_load":true,"can_save":true} |
| capabilities | ["UI"] |
UIListLayout.Padding
Determines the amount of free space between each element, set to either a scale (percentage of the parent's size in the current direction) or an offset (static spacing value similar to pixel size).
| Field | Value |
|---|---|
| type | UDim |
| security | {"read":"None","write":"None"} |
| thread safety | ReadSafe |
| category | Appearance |
| serialization | {"can_load":true,"can_save":true} |
| capabilities | ["UI"] |
UIListLayout.VerticalFlex
When the list layout's FillDirection is set to FillDirection.Vertical, the VerticalFlex property specifies how to distribute extra vertical space in the parent container.
| Setting | Sibling Behavior |
|---|---|
Enum.UIFlexAlignment.None|None | No flex behavior; siblings maintain their defined height. |
Enum.UIFlexAlignment.Fill|Fill | Siblings resize vertically to fill the entire parent container, overriding their defined height. The number of siblings in a column remain unchanged; for example, if three siblings fit vertically within the container's height under the Enum.UIFlexAlignment.None|None setting, those three siblings will resize to fill the entire height. |
Enum.UIFlexAlignment.SpaceAround|SpaceAround | Siblings maintain their defined height. Equal spacing is added on both sides of each sibling. |
Enum.UIFlexAlignment.SpaceBetween|SpaceBetween | Siblings maintain their defined height. Equal spacing is added between siblings, but no additional space is added around siblings. |
Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly | Siblings maintain their defined height. Equal spacing is added both between and around siblings. |
Cross-Direction Behavior
In horizontal list layouts (FillDirection set to FillDirection.Horizontal), the VerticalFlex property specifies how to distribute the siblings across the vertical cross direction. In such layouts, a setting of UIFlexAlignment.Fill makes the siblings fill the entire vertical space while horizontal spacing adheres to HorizontalFlex.
AutomaticSize Interaction
If GuiObject.AutomaticSize is enabled for a child of the UIListLayout in the FillDirection, it is interpreted as "automatic flex basis" and it defines the size of the GuiObject from which it can grow or shrink.
If GuiObject.AutomaticSize is enabled for a child of the UIListLayout in the cross‑direction, it is interpreted as "automatic cross size" and it defines the minimum size needed to contain all the child's content in the cross‑direction.
| Field | Value |
|---|---|
| type | UIFlexAlignment |
| security | {"read":"None","write":"None"} |
| thread safety | ReadSafe |
| category | Alignment |
| serialization | {"can_load":true,"can_save":true} |
| capabilities | ["UI"] |
UIListLayout.Wraps
Controls whether siblings within the parent container wrap to another line when their default size exceeds the width/height of the container's bounds.
| Field | Value |
|---|---|
| type | boolean |
| security | {"read":"None","write":"None"} |
| thread safety | ReadSafe |
| category | Behavior |
| serialization | {"can_load":true,"can_save":true} |
| capabilities | ["UI"] |
Methods
Inherited from UIGridStyleLayout
| Name | Type / Returns | Description |
|---|---|---|
| UIGridStyleLayout:ApplyLayout | () | Force re-layout of sibling UI elements. |
| UIGridStyleLayout:SetCustomSortFunction | () | Sets the function used to determine the order of elements when SortOrder is set to Custom. |
Inherited from Instance
| Name | Type / Returns | Description |
|---|---|---|
| Instance:AddTag | () | Applies a tag to the instance. |
| Instance:children | Instances | Returns an array of the object's children. |
| Instance:ClearAllChildren | () | This method destroys all of an instance's children. |
| Instance:Clone | Instance | Create a copy of an instance and all its descendants, ignoring instances that are not Archivable. |
| Instance:clone | Instance | |
| Instance:Destroy | () | Sets the Instance.Parent property to nil, locks the Instance.Parent property, disconnects all connections, and calls Destroy() on all children. |
| Instance:destroy | () | |
| Instance:FindFirstAncestor | Instance? | Returns the first ancestor of the Instance whose Instance.Name is equal to the given name. |
| Instance:FindFirstAncestorOfClass | Instance? | Returns the first ancestor of the Instance whose Object.ClassName is equal to the given className. |
| Instance:FindFirstAncestorWhichIsA | Instance? | Returns the first ancestor of the Instance for whom Object:IsA() returns true for the given className. |
| Instance:FindFirstChild | Instance? | Returns the first child of the Instance found with the given name. |
| Instance:findFirstChild | Instance | |
| Instance:FindFirstChildOfClass | Instance? | Returns the first child of the Instance whose ClassName is equal to the given class name. |
| Instance:FindFirstChildWhichIsA | Instance? | Returns the first child of the Instance for whom Object:IsA() returns true for the given className. |
| Instance:FindFirstDescendant | Instance? | Returns the first descendant found with the given Instance.Name. |
| Instance:GetActor | Actor? | Returns the Actor associated with the Instance, if any. |
| Instance:GetAttribute | Variant | Returns the value which has been assigned to the given attribute name. |
| Instance:GetAttributeChangedSignal | RBXScriptSignal | Returns an event that fires when the given attribute changes. |
| Instance:GetAttributes | Dictionary | Returns a dictionary of the instance's attributes. |
| Instance:GetChildren | Instances | Returns an array containing all of the instance's children. |
| Instance:getChildren | Instances | |
| Instance:GetDebugId | string | Returns a coded string of the debug ID used internally by Roblox. |
| Instance:GetDescendants | Instances | Returns an array containing all of the descendants of the instance. |
| Instance:GetFullName | string | Returns a string describing the instance's ancestry. |
| Instance:GetStyled | Variant | Returns the styled or explicitly modified value of the specified property, or else the default property value if it hasn't been styled/modified. |
| Instance:GetStyledPropertyChangedSignal | RBXScriptSignal | Returns an event that fires when the given style property changes on the instance. |
| Instance:GetTags | Array | Gets an array of all tags applied to the instance. |
| Instance:HasTag | boolean | Check whether the instance has a given tag. |
| Instance:IsAncestorOf | boolean | Returns true if an Instance is an ancestor of the given descendant. |
| Instance:IsDescendantOf | boolean | Returns true if an Instance is a descendant of the given ancestor. |
| Instance:isDescendantOf | boolean | |
| Instance:IsPropertyModified | boolean | Returns true if the value stored in the specified property is not equal to the code-instantiated default. |
| Instance:QueryDescendants | Instances | Returns an array containing all descendants of the instance that match the selector string. |
| Instance:Remove | () | Sets the object's Parent to nil, and does the same for all its descendants. |
| Instance:remove | () | |
| Instance:RemoveTag | () | Removes a tag from the instance. |
| Instance:ResetPropertyToDefault | () | Resets a property to its default value. |
| Instance:SetAttribute | () | Sets the attribute with the given name to the given value. |
| Instance:WaitForChild | Instance | Returns the child of the Instance with the given name. If the child does not exist, it will yield the current thread until it does. |
Inherited from Object
| Name | Type / Returns | Description |
|---|---|---|
| Object:GetPropertyChangedSignal | RBXScriptSignal | Get an event that fires when a given property of the object changes. |
| Object:IsA | boolean | Returns true if an object's class matches or inherits from a given class. |
| Object:isA | boolean |
Events
Inherited from Instance
| Name | Type / Returns | Description |
|---|---|---|
| Instance.AncestryChanged | Fires when the Instance.Parent property of this object or one of its ancestors is changed. | |
| Instance.AttributeChanged | Fires whenever an attribute is changed on the Instance. | |
| Instance.ChildAdded | Fires after an object is parented to this Instance. | |
| Instance.childAdded | ||
| Instance.ChildRemoved | Fires after a child is removed from this Instance. | |
| Instance.DescendantAdded | Fires after a descendant is added to the Instance. | |
| Instance.DescendantRemoving | Fires immediately before a descendant of the Instance is removed. | |
| Instance.Destroying | Fires immediately before (or is deferred until after) the instance is destroyed via Instance:Destroy(). | |
| Instance.StyledPropertiesChanged | Fires whenever any style property is changed on the instance, including when a property is set to nil. |
Inherited from Object
| Name | Type / Returns | Description |
|---|---|---|
| Object.Changed | Fires immediately after a property of the object changes, with some limitations. |