Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

컨테이너 동작 설정

FlexBox 컨테이너의 동작을 구성하려면 FlexBoxConfig 블록을 만들고 config 매개변수를 사용하여 제공합니다.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

FlexBoxConfig를 사용하여 레이아웃 방향, 래핑 동작, 정렬, 항목 간 간격을 정의합니다.

레이아웃 방향

direction 함수는 항목이 배치되는 방향을 지정하는 기본 축을 설정합니다. 허용되는 값은 다음과 같습니다.

Row (기본값): 기본축을 가로로 설정합니다. 왼쪽에서 오른쪽으로 쓰는 언어에서는 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 쓰는 언어에서는 오른쪽에서 왼쪽으로 표시됩니다.
RowReverse: Row의 방향을 반대로 바꿉니다.
Column: 기본 축을 위에서 아래로 세로로 설정합니다.
ColumnReverse: Column의 방향을 반대로 바꿉니다.

항목 정렬 및 추가 공간 분산

다음 섹션에서는 기본 축과 교차 축을 따라 항목을 정렬하고 추가 공간을 분배하는 방법을 설명합니다.

기본축을 따라

justifyContent를 사용하여 기본축을 따라 항목을 분산합니다. 다음 표는 방향이 Row일 때의 동작을 보여줍니다.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

교차축을 따라

alignItems를 사용하여 단일 줄 내에서 교차축을 따라 항목을 정렬합니다. 이 동작은 alignSelf 수정자를 사용하여 개별 항목으로 재정의할 수 있습니다.

다음 이미지는 방향이 Row일 때의 동작을 보여줍니다.


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

alignContent를 사용하여 선을 교차 축에 정렬하고 선 사이에 추가 공간을 분산합니다. 이 속성은 여러 줄이 있는 경우(줄바꿈이 사용 설정됨)에만 적용됩니다. 다음 이미지는 방향이 Row일 때의 동작을 보여줍니다.


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

항목 래핑

래핑을 사용하면 FlexBox 컨테이너가 여러 줄로 구성되어 맞지 않는 항목이 교차축을 따라 새 행이나 열로 이동합니다. wrap를 사용하여 래핑 동작을 구성합니다.

`FlexWrap` 값	`Row` 방향을 사용하는 예시
`NoWrap` (기본값): 항목이 래핑되지 않도록 합니다. 기본 크기가 충분하지 않으면 항목이 오버플로됩니다.
`Wrap`: 항목 (및 간격)을 위한 공간이 부족하면 교차 축 방향으로 새 줄이 생성됩니다. 예를 들어 방향이 `Row`이면 새 줄이 아래에 추가됩니다.
`WrapReverse`: `Wrap`와 동일하지만 새 줄이 교차축과 반대 방향으로 추가됩니다. 예를 들어 방향이 `Row`이면 새 줄이 위에 추가됩니다.

다음 예시에서는 FlexBox 래핑 알고리즘의 작동 방식을 보여줍니다. FlexBox 컨테이너의 기본 크기는 100dp이고 wrap는 FlexWrap.Wrap로 설정되며 간격은 8dp입니다. 각각 basis 20dp, 40dp, 50dp가 있는 항목 3개가 포함되어 있습니다.

줄에 100dp의 여유 공간이 있습니다. 자녀 1은 20dp입니다. 공간이 있으므로 하위 요소 1이 줄에 배치됩니다.