> For the complete documentation index, see [llms.txt](https://docs.overdare.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.overdare.com/development/api-reference/classes/uilistlayout.md).

# UIListLayout

UIListLayout : `UIGridStyleLayout`

## Overview

A layout that can be used to automatically place sibling UI elements either horizontally or vertically within the area of their parent UI. The direction of placement is determined by the FillDirection setting; it is used when UIs need to be sorted out in the form of a list.

UIListLayout can be controlled only in **client environment**.

## Properties

### HorizontalFlex

`Enum.UIFlexAlignment`

Specifies how to distribute the horizontal space remaining after child UI elements are placed.

* `None`: Does not distribute the remaining space.
* `Fill`: Increases the size of child elements to fill the remaining space.
* `SpaceBetween`: Places the first and last elements at both ends and divides the space between elements equally.
* `SpaceAround`: Places space of the same size on both sides of each element.
* `SpaceEvenly`: Divides the space at both ends and between elements all into the same size.

SpaceBetween, SpaceAround, and SpaceEvenly determine the spacing by dividing the entire remaining space instead of using Padding.

#### Code Samples

```lua
local ScreenGui = script.Parent
local Frame = ScreenGui:WaitForChild("Frame")
local UIListLayout = Frame:WaitForChild("UIListLayout")

UIListLayout.FillDirection = Enum.FillDirection.Horizontal
UIListLayout.HorizontalFlex = Enum.UIFlexAlignment.SpaceEvenly
```

### ItemLineAlignment

`Enum.ItemLineAlignment`

Specifies how child UI elements within a line are aligned along the axis perpendicular to the arrangement direction.

* `Automatic`: The default. If Flex is applied to the cross axis, it behaves as Stretch; otherwise, it follows the alignment property (HorizontalAlignment or VerticalAlignment).
* `Start`: Aligns to the start of the line.
* `Center`: Aligns to the center of the line.
* `End`: Aligns to the end of the line.
* `Stretch`: Stretches to fit the size of the line.

#### Code Samples

```lua
local ScreenGui = script.Parent
local Frame = ScreenGui:WaitForChild("Frame")
local UIListLayout = Frame:WaitForChild("UIListLayout")

UIListLayout.ItemLineAlignment = Enum.ItemLineAlignment.Center
```

### Padding

`UDim`

Defines the spacing among UI elements.

The spacing can be specified as Scale, where spacing is automatically adjusted in proportion to the size of parent container, or Offset, where spacing is always fixed.

#### Code Samples

```lua
local ScreenGui = script.Parent
local Frame = ScreenGui:WaitForChild("Frame")
local UIListLayout = Frame:WaitForChild("UIListLayout")

UIListLayout.Padding = UDim.new(0, 20)
```

### VerticalFlex

`Enum.UIFlexAlignment`

Specifies how to distribute the vertical space remaining after child UI elements are placed.

The meaning of the values is the same as HorizontalFlex, applied in the vertical direction.

#### Code Samples

```lua
local ScreenGui = script.Parent
local Frame = ScreenGui:WaitForChild("Frame")
local UIListLayout = Frame:WaitForChild("UIListLayout")

UIListLayout.FillDirection = Enum.FillDirection.Vertical
UIListLayout.VerticalFlex = Enum.UIFlexAlignment.Fill
```

### Wraps

`boolean`

Specifies whether to break line when the listed elements within their parent UI area exceed the available space of the container.

For example, if the sum of the width of horizontally placed elements exceeds their parent’s width, elements are placed on the next line; if height exceeds in vertical placement, elements are placed in the next column.

#### Code Samples

```lua
local ScreenGui = script.Parent
local Frame = ScreenGui:WaitForChild("Frame")
local UIListLayout = Frame:WaitForChild("UIListLayout")

UIListLayout.Wraps = true
```

## Methods

## Events

## See also