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 - 레이아웃 순서를 제어합니다.

이러한 속성에 대한 자세한 내용은 상품 동작 설정을 참고하세요.

FlexBox 레이아웃 알고리즘 이해

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

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

  1. 자식 기본 크기 계산: 자식의 basis 값을 사용하여 추가 공간이 분배되기 전에 기본 축을 따라 초기 크기를 계산합니다.

  2. 하위 요소 정렬: order 값이 있는 경우 하위 요소를 해당 값에 따라 정렬합니다.

  3. 빌드 라인: 각 하위 요소의 초기 크기와 gap이 현재 줄의 남은 공간에 맞는지 확인합니다. 그렇다면 이 자녀를 줄에 배치합니다. 그렇지 않으면 줄바꿈이 사용 설정된 경우 새 줄에 배치하거나 컨테이너 가장자리에 부분적으로 가려지는 현재 줄에 항목을 배치합니다.

  4. 기본 축에서 항목 정렬 또는 크기 조절: 각 행에서 항목을 크기 조절하거나 정렬하여 항목 사이에 또는 항목에 여백을 분배합니다.

  5. 교차 축에서 항목 정렬 또는 크기 조절: 각 행에 대해 늘리거나 정렬하여 항목과 행 사이에 여분의 공간을 분배합니다.

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