FlexBox는 항목을 한 방향으로 배치하는 컨테이너입니다. 사용 가능한 공간을 최적으로 채우기 위해 항목 간의 공간을 조절하고, 래핑하고, 정렬하고, 분산할 수 있습니다. 다양한 크기의 항목과 사용 가능한 공간이 변경될 때 항목 크기를 조절하는 데 유용한 레이아웃입니다.
FlexBox를 사용하면 다음 작업을 할 수 있습니다.
- 사용 가능한 공간을 채우기 위해 항목이 늘어나고 줄어드는 방식 제어
- 공간이 충분하지 않은 경우 항목을 새 행 또는 열로 줄바꿈합니다.
- 편리한 사전 설정을 사용하여 항목 간에 추가 공간 분배
FlexBox를 사용하는 경우
FlexBox는 일반적으로 전체 화면 레이아웃 내에서 소수의 항목을 표시하는 데 사용됩니다. 전체 화면 레이아웃의 경우 일반적으로 Grid이 더 나은 선택입니다. FlexBox는 항목의 지연 로드를 지원하지 않습니다. 많은 수의 항목을 표시하려면 지연 목록 및 그리드를 사용합니다. 항목을 래핑해야 하는 경우 FlowRow 및 FlowColumn 대신 FlexBox를 사용합니다.
용어 및 개념
FlexBox는 항목을 가로 또는 세로 선으로 배치합니다. 이러한 선의 방향에 따라 기본 축이 설정됩니다. 기본 축에서 90도 회전한 축이 교차축입니다. 기본축을 따라 있는 FlexBox의 길이를 기본 크기라고 합니다. 해당하는 교차 축 길이를 교차 크기라고 합니다. 이러한 크기와 축은 FlexBox 동작의 기반을 형성합니다.
FlexBox 방향이 Row일 때의 축과 크기
FlexBox 방향이 Column일 때의 축과 크기속성 적용
FlexBox 속성은 다음 두 가지 방법으로 적용할 수 있습니다.
FlexBox(config)를 사용하여FlexBox컨테이너로Modifier.flex를 사용하여FlexBox내의 항목으로 이동
컨테이너 속성 ( |
항목 속성 ( |
|---|---|
이러한 속성에 관한 자세한 내용은 컨테이너 동작 설정을 참고하세요. |
이러한 속성에 관한 자세한 내용은 항목 동작 설정을 참고하세요. |
FlexBox 레이아웃 알고리즘 이해
FlexBox의 가장 강력한 기능 중 하나는 사용 가능한 공간에 가장 잘 맞도록 하위 요소의 크기를 조절할 수 있다는 점입니다. FlexBox가 이 작업을 실행하는 방식을 이해하면 FlexBox 속성을 설정하여 가능한 모든 크기에 맞게 UI를 최적화할 수 있습니다.
FlexBox의 레이아웃 알고리즘은 다음과 같은 방식으로 작동합니다.
하위 요소 기본 크기 계산: 하위 요소의
basis값을 사용하여 추가 공간이 분배되기 전에 기본 축을 따라 초기 크기를 계산합니다.하위 요소 정렬: 하위 요소를
order값(있는 경우)에 따라 정렬합니다.줄 빌드: 각 하위 요소에 대해 초기 크기에
gap를 더한 값이 현재 줄의 남은 공간에 맞는지 확인합니다. 그렇다면 이 자녀를 줄에 세웁니다. 그렇지 않은 경우 래핑이 사용 설정되어 있으면 새 줄에 배치하고, 그렇지 않으면 현재 줄에 배치하여 오버플로가 발생합니다 (컨테이너 가장자리에 의해 부분적으로 가려짐).기본 축에서 항목 정렬 또는 크기 조절: 각 줄에서 항목의 크기를 조절하거나 정렬하여 항목 에 또는 항목 사이에 추가 공간을 분산합니다.
교차축에서 항목 정렬 또는 크기 조절: 각 줄에서 항목과 줄을 늘리거나 정렬하여 항목과 줄에 추가 공간을 분배합니다.
FlexBox 개념을 숙지했으므로 시작하기를 참조하여 기본 FlexBox를 만듭니다.