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 값이 있는 경우 하위 요소를 해당 값에 따라 정렬합니다.
빌드 라인: 각 하위 요소의 초기 크기와 gap이 현재 행의 남은 공간에 맞는지 확인합니다. 그렇다면 이 하위 요소를 줄에 배치합니다. 그렇지 않으면 줄바꿈이 사용 설정된 경우 새 줄에 배치하거나, 현재 줄에 배치하여 오버플로되도록 합니다 (컨테이너 가장자리에 의해 부분적으로 가려짐).
기본 축에서 항목 정렬 또는 크기 조절: 각 행에서 항목을 크기 조절하거나 정렬하여 항목 사이에 여백을 분배합니다.
교차 축에서 항목 정렬 또는 크기 조절: 각 행에 대해 늘리거나 정렬하여 항목과 행에 또는 항목과 행 사이에 여백을 분배합니다.

FlexBox 개념을 숙지했으므로 시작하기를 참고하여 기본 FlexBox를 만드세요.

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

시작하기