FlexBox

FlexBox 는 항목을 한 방향으로 배치하는 컨테이너입니다. 사용 가능한 공간을 최적으로 채우기 위해 항목 간에 공간의 크기를 조절하고, 줄바꿈하고, 정렬하고, 분배할 수 있습니다. 다양한 크기의 항목과 사용 가능한 공간이 변경될 때 항목의 크기를 조절하는 데 유용한 레이아웃입니다.

FlexBox를 사용하면 다음 작업을 할 수 있습니다.

사용 가능한 공간을 채우기 위해 항목이 늘어나고 줄어드는 방식을 제어합니다.
항목을 배치할 공간이 충분하지 않은 경우 항목을 새 행 또는 열로 줄바꿈합니다.
편리한 사전 설정을 사용하여 항목 간에 추가 공간을 분배합니다.

FlexBox를 사용해야 하는 경우

FlexBox 는 일반적으로 전체 화면 레이아웃 내 에서 적은 수의 항목을 표시하는 데 사용됩니다. 전체 화면 레이아웃의 경우 일반적으로 Grid를 선택하는 것이 좋습니다. FlexBox 는 항목의 지연 로드를 지원하지 않습니다. 많은 수의 항목을 표시하려면 지연 목록 및 그리드를 사용하세요. 항목을 줄바꿈해야 하는 경우 FlowRow 및 FlowColumn 대신 FlexBox를 사용하세요.

용어 및 개념

FlexBox는 항목을 가로 또는 세로 선 으로 배치합니다. 이러한 선의 방향이 기본 축 을 설정합니다. 기본 축에서 90도 떨어진 곳이 교차축 입니다. 기본 축을 따라 FlexBox의 길이를 기본 크기 라고 합니다. 상응하는 교차축 길이를 교차 크기 라고 합니다. 이러한 크기와 축은 FlexBox 동작의 기초를 형성합니다.

가로 기본축과 세로 교차축이 있는 FlexBox — **그림 1.** `FlexBox` 방향이 `Row`일 때의 축과 크기

세로 기본축과 가로 교차축이 있는 FlexBox — **그림 2.** `FlexBox` 방향이 `Column`일 때의 축과 크기

속성 적용

다음 두 가지 방법으로 FlexBox 속성을 적용할 수 있습니다.

FlexBox(config)를 사용하여 FlexBox 컨테이너에 적용
Modifier.flex를 사용하여 FlexBox 내의 항목에 적용

컨테이너 속성 (`config`)	항목 속성 (`Modifier.flex`)
`direction` - 항목 레이아웃 방향 `wrap` - 기본 크기 가 충분하지 않은 경우 항목을 줄바꿈할지 여부 `justifyContent` - 항목을 기본 축을 따라 분배하는 방법 `alignItems` - 항목을 교차축을 따라 정렬하는 방법 `alignContent` - 여러 줄이 있을 때 교차 크기에서 추가 공간을 분배하는 방법 `rowGap` / `columnGap` - 항목과 선 사이에 공간을 추가합니다. 이러한 속성에 관한 자세한 내용은 컨테이너 동작 설정을 참고하세요.	`basis` - 기본 크기에서 추가 공간이 분배되기 전의 항목 크기 `grow` - 이 항목이 수신해야 하는 기본 크기 에서 추가 공간의 공유 `shrink` - 이 항목이 수신해야 하는 기본 크기 에서 공간 부족의 공유 `alignSelf` - 교차 크기 에서 이 항목으로 추가 공간을 분배하는 방법, `alignItems`를 재정의합니다. `order` - 레이아웃 순서를 제어합니다. 이러한 속성에 관한 자세한 내용은 항목 동작 설정을 참고하세요.

컨테이너 속성 (config)

항목 속성 (Modifier.flex)

direction - 항목 레이아웃 방향
wrap - **기본 크기** 가 충분하지 않은 경우 항목을 줄바꿈할지 여부
justifyContent - 항목을 기본 축을 따라 분배하는 방법
alignItems - 항목을 교차축을 따라 정렬하는 방법
alignContent - 여러 줄이 있을 때 교차 크기에서 추가 공간을 분배하는 방법
rowGap / columnGap - 항목과 선 사이에 공간을 추가합니다.

이러한 속성에 관한 자세한 내용은 컨테이너 동작 설정을 참고하세요.

basis - 기본 크기에서 추가 공간이 분배되기 전의 항목 크기
grow - 이 항목이 수신해야 하는 기본 크기 에서 추가 공간의 공유
shrink - 이 항목이 수신해야 하는 기본 크기 에서 공간 부족의 공유
alignSelf - 교차 크기 에서 이 항목으로 추가 공간을 분배하는 방법, alignItems를 재정의합니다.
order - 레이아웃 순서를 제어합니다.

이러한 속성에 관한 자세한 내용은 항목 동작 설정을 참고하세요.

`FlexBox` 레이아웃 알고리즘 이해

FlexBox의 가장 강력한 기능 중 하나는 사용 가능한 공간에 가장 적합하도록 하위 요소의 크기를 조절하는 기능입니다. FlexBox가 이 작업을 실행하는 방식을 이해하면 가능한 모든 크기에 맞게 UI를 최적화하도록 FlexBox 속성을 설정하는 데 도움이 될 수 있습니다.

FlexBox의 레이아웃 알고리즘은 다음과 같이 작동합니다.

하위 요소 기본 크기 계산: 하위 요소의 basis 값 을 사용하여 추가 공간이 분배되기 전에 기본 축을 따라 초기 크기를 계산합니다.
하위 요소 정렬: `order` 값이 있는 경우 하위 요소를 order 값으로 정렬합니다.
선 빌드: 각 하위 요소에 대해 초기 크기 더하기 gap이 현재 선의 남은 공간에 맞는지 확인합니다. 맞는 경우 이 하위 요소를 선에 배치합니다. 맞지 않는 경우 줄바꿈이 사용 설정되어 있으면 새 선에 배치하거나 항목이 오버플로되는 현재 선에 항목을 배치합니다 (컨테이너의 가장자리에 의해 부분적으로 가려짐).
기본 축에서 항목 정렬 또는 크기 조절: 각 선에 대해 항목의 크기를 조절하거나 정렬하여 항목 에 또는 항목 간에 추가 공간을 분배합니다.
교차축에서 항목 정렬 또는 크기 조절: 각 선에 대해 항목과 선을 늘리거나 정렬하여 항목에 또는 항목과 선 사이에 추가 공간을 분배합니다.

이제 FlexBox 개념에 익숙해졌으니 시작하기를 참고하여 기본 FlexBox을 만드세요.

적응형 권장사항 및 금지사항

시작하기