> 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/korean/development/api-reference/classes/uilistlayout.md).

# UIListLayout

UIListLayout : `UIGridStyleLayout`

## Overview

형제 UI 요소들을 부모 UI 영역 안에서 가로 또는 세로 방향으로 자동 배치하는 레이아웃입니다. 배치 방향은 FillDirection 설정에 따라 결정되며, 리스트 형태로 UI를 정돈할 때 활용됩니다.

UIListLayout은 **클라이언트 환경**에서만 제어할 수 있습니다.

## Properties

### HorizontalFlex

`Enum.UIFlexAlignment`

자식 UI 요소를 배치하고 남은 가로 공간을 어떻게 분배할지 지정합니다.

* `None`: 남은 공간을 분배하지 않습니다.
* `Fill`: 자식 요소의 크기를 늘려 남은 공간을 채웁니다.
* `SpaceBetween`: 첫 요소와 마지막 요소를 양 끝에 두고, 요소 사이에 공간을 똑같이 나눕니다.
* `SpaceAround`: 각 요소의 양옆에 같은 크기의 공간을 둡니다.
* `SpaceEvenly`: 양 끝과 요소 사이의 공간을 모두 같은 크기로 나눕니다.

SpaceBetween, SpaceAround, SpaceEvenly는 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`

한 줄 안에서 자식 UI 요소를 나열 방향과 수직인 축으로 정렬하는 방식을 지정합니다.

* `Automatic`: 기본값입니다. 교차축에 Flex가 적용되어 있으면 Stretch로, 그렇지 않으면 정렬 속성(HorizontalAlignment 또는 VerticalAlignment)을 따릅니다.
* `Start`: 줄의 시작 쪽에 맞춥니다.
* `Center`: 줄의 가운데에 맞춥니다.
* `End`: 줄의 끝 쪽에 맞춥니다.
* `Stretch`: 줄의 크기에 맞게 늘립니다.

#### Code Samples

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

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

### Padding

`UDim`

UI 요소들 사이의 간격을 정의합니다.

간격은 부모 컨테이너 크기에 비례해 자동으로 조정되는 비율 기반(Scale) 또는 언제나 동일한 크기를 유지하는 고정값 기반(Offset) 중 원하는 방식으로 지정할 수 있습니다.

#### 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`

자식 UI 요소를 배치하고 남은 세로 공간을 어떻게 분배할지 지정합니다.

값의 의미는 HorizontalFlex와 같으며 세로 방향에 적용됩니다.

#### 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`

부모 UI 영역 안에서 요소들을 나열할 때, 컨테이너의 가용 공간을 넘어서면 새 줄로 넘어가도록 할지를 지정합니다.

예를 들어 가로 방향 배치에서 요소들의 너비 합이 부모의 너비를 초과하면 아래 줄로 이동해 배치가 이어지고, 세로 배치에서는 높이를 초과할 때 다음 열로 넘어가는 방식으로 작동합니다.

#### Code Samples

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

UIListLayout.Wraps = true
```

## Methods

## Events

## See also

{% content-ref url="/pages/K1g0tEWDJhh6a6E4UURk" %}
[GUI](/korean/manual/studio-manual/gui.md)
{% endcontent-ref %}