항목 동작 설정

Modifier.flex를 사용하여 FlexBox 내에서 항목의 크기, 순서, 정렬 방식을 제어합니다.

상품 크기

basis, grow, shrink 함수를 사용하여 항목의 크기를 제어합니다.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}
FlexBoxSnippets.kt

초기 크기 설정

basis를 사용하여 추가 공간이 분배되기 전에 항목의 초기 크기를 지정합니다. 이를 항목의 기본 크기로 생각할 수 있습니다.

값 유형	동작	코드 스니펫 참고: 상자의 최대 고유 크기는 100dp입니다.	컨테이너 너비 600dp를 사용하는 예시
Auto (기본)	항목의 최대 고유 크기를 사용합니다. 예를 들어 Text 컴포저블의 최대 고유 너비는 한 줄에 있는 모든 텍스트의 너비입니다(줄바꿈 없음).	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
dp를 수정했습니다.	Dp 단위의 고정 크기입니다.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
비율	컨테이너 크기의 백분율입니다.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

기준 값이 항목의 고유 최솟값보다 작으면 고유 최솟값이 대신 사용됩니다. 예를 들어 단어가 포함된 Text 항목을 표시하는 데 50dp가 필요하지만 basis = 10.dp도 있는 경우 50dp 값이 사용됩니다.

공간이 있을 때 항목 늘리기

grow를 사용하여 추가 공간이 있을 때 항목이 얼마나 커지는지 지정합니다. 이는 모든 항목의 basis 값을 더한 후 FlexBox 컨테이너에 남아 있는 공간입니다. grow 값은 지정된 하위 요소가 동위 요소에 비해 추가 공간을 얼마나 받을지를 나타냅니다. 기본적으로 항목은 확장되지 않습니다.

다음 예는 하위 항목이 3개인 FlexBox를 보여줍니다. 각각의 기준 값은 100dp입니다. 첫 번째 하위 요소의 grow 값이 양수입니다. grow 값이 있는 하위 요소가 하나뿐이므로 실제 값은 관련이 없습니다. 양수이기만 하면 하위 요소가 모든 추가 공간을 받습니다.

이미지는 컨테이너 크기가 600dp일 때 FlexBox 동작을 보여줍니다.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

각 하위 요소의 기준 값은 100dp입니다. 300dp의 추가 공간이 있습니다. 하위 요소 1은 300dp만큼 커져 추가 공간을 채웁니다.

다음 예시에서는 컨테이너 크기와 basis 크기가 동일합니다. 차이점은 각 하위 요소에 서로 다른 grow 값이 있다는 것입니다.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow(2f) } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow(3f) } ) } FlexBoxSnippets.kt

각 하위 요소의 기준 값은 100dp입니다. 300dp의 추가 공간이 있습니다. 총 증가 값은 6입니다. 하위 요소 1은 (1 / 6) * 300 = 50dp만큼 증가합니다. 하위 요소 2는 (2 / 6) * 300 = 100dp만큼 증가합니다. 하위 요소 3은 (3 / 6) * 300 = 150dp만큼 증가합니다.

공간이 부족할 때 항목 축소

shrink를 사용하여 FlexBox 컨테이너에 모든 항목을 수용할 공간이 부족할 때 항목이 축소되는 정도를 지정합니다. shrink는 grow와 동일한 방식으로 작동하지만, 추가 공간을 항목에 분배하는 대신 공간 부족을 항목에 분배합니다. shrink 값은 항목이 받는 공간 부족량, 즉 항목이 축소되는 정도를 지정합니다. 기본적으로 항목의 shrink 값은 1f입니다. 즉, 동일하게 축소됩니다.

다음 예에서는 동일한 텍스트가 있는 두 개의 Text 컴포저블을 보여줍니다. 첫 번째 하위 요소의 축소 값은 1f입니다. 즉, 축소되어 모든 공간 부족을 흡수합니다.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}
FlexBoxSnippets.kt

컨테이너 크기가 줄어들면 하위 요소 1이 축소됩니다.

컨테이너 크기	FlexBox UI
700dp
500dp
450dp

항목 정렬

alignSelf를 사용하여 항목이 교차 축에 정렬되는 방식을 제어합니다. 이렇게 하면 이 항목의 컨테이너에 있는 alignItems 속성이 재정의됩니다. FlexBox 컨테이너의 동작을 상속하는 Auto가 추가되어 가능한 모든 값이 동일합니다.

예를 들어 이 FlexBox에는 alignItems가 Start로 설정되어 있고 교차 축 정렬을 재정의하는 하위 요소가 5개 있습니다.

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}
FlexBoxSnippets.kt

항목 순서

기본적으로 FlexBox는 코드에 선언된 순서대로 항목을 배치합니다. order를 사용하여 이 동작을 재정의합니다.

order의 기본값은 0이며 FlexBox는 이 값을 기준으로 항목을 오름차순으로 정렬합니다. order 값이 동일한 항목은 선언된 순서와 동일한 순서로 배치됩니다. 음수 및 양수 order 값을 사용하여 항목이 선언된 위치를 변경하지 않고 레이아웃의 시작 또는 끝으로 항목을 이동합니다.

다음 예시에서는 하위 항목 두 개를 보여줍니다. 첫 번째는 기본 order가 0이고 두 번째는 순서가 -1입니다. 정렬 후 하위 요소 1은 하위 요소 2 뒤에 표시됩니다.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}
FlexBoxSnippets.kt