FlexBox 시작하기

이 페이지에서는 기본 FlexBox 레이아웃을 구현하는 방법을 설명합니다.

프로젝트 설정

1. 프로젝트의 lib.versions.toml에 androidx.compose.foundation.layout 라이브러리를 추가합니다.

   [versions]
   compose = "1.11.0-alpha06"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. 앱의 build.gradle.kts에 라이브러리 종속 항목을 추가합니다.

   dependencies {
       implementation(libs.androidx.compose.foundation.layout)
   }
   

기본 FlexBox 레이아웃 만들기

예 1: FlexBox는 중앙에 정렬된 두 개의 Text 요소를 배치합니다.

FlexBox(
    config = {
        direction = FlexDirection.Column
        alignItems = FlexAlignItems.Center
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

예 2: FlexBox는 5개의 항목을 두 행으로 래핑하고 각 행에서 사용 가능한 공간을 채우기 위해 항목을 불균등하게 확장합니다. 항목 사이에 세로 및 가로로 8.dp 간격이 있습니다.

FlexBox(
    config = {
        wrap = FlexWrap.Wrap
        gap(8.dp)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow = 1.0f })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.7f })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.3f })
}
FlexBoxSnippets.kt

FlexBox 동작에 관한 자세한 내용은 컨테이너 동작 설정 및 항목 동작 설정을 참고하세요.