컨테이너 동작 설정

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의 세 가지 항목이 포함되어 있습니다.

줄에 100dp의 사용 가능한 공간이 있습니다. 하위 1은 20dp입니다. 공간이 있으므로 하위 1이 줄에 배치됩니다.