컨테이너 동작 설정

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입니다. 공간이 있으므로 Child 1이 줄에 배치됩니다.