CSS Flexbox 레이아웃
React Native 애플리케이션 레이아웃은 CSS Flexbox 레이아웃 기술을 사용합니다.
Flexbox 레이아웃에 대해 잘 모른다면 Flexbox를 먼저 학습해야 합니다. React Native 컴포넌트는 flexDirection, justifyContent, alignItems 속성 조합을 통해 컴포넌트를 레이아웃(배치) 합니다.
영상 강의
Flexbox 레이아웃이 생소하다면 영상 강의를 시청하며 CSS 모던 레이아웃 - Flexbox 시작하기! - codepen 실습을 진행해보세요.
1. Flexbox 레이아웃 시작하기
Flexbox 레이아웃 축(Axis)에 대한 개념과 주축(Main Axis) 기준 정렬에 대해 학습합니다.
| 축 | 설명 |
|---|---|
| 주 축(Main Axis) | Flexbox 컨테이너 설정된 요소의 flex-direction 속성 값이 설정된 방향 (row, column) |
| 교차 축(Cross Axis) | 주 축과 수직으로 교차하는 방향 |
CSS Flexbox의 주 축 방향 기본 값은 행(row)이지만, React Native는 기본 값은 열(column) 입니다. 주 축(Main Axis) 방향을 변경하려면 다음과 같이 React 스타일 설정 방법을 사용해 설정합니다.
<View style={{flexDirection: 'row'}} />
1
2. Flexbox 컨테이너 속성
Flexbox 컨테이너 요소에 설정 가능한 속성을 학습합니다.
| 속성 | 설명 |
|---|---|
| display: flex | inline-flex | Flex 컨테이너 요소로 설정 |
| flex-direction | 주 축 방향 설정 |
| flex-wrap | 래핑(wrapping) 설정 |
| flex-flow | 주 축 방향, 래핑 속성 속기형 설정 |
| justify-content | 주 축 기준 정렬 |
| align-items | 교차 축 기준 정렬 (개별 Flexbox 아이템 제어) |
| align-content | 교차 축 기준 정렬 (Flexbox 아이템 그룹 제어) |
3. Flexbox 아이템 속성
Flexbox 아이템 요소에 설정 가능한 속성을 학습합니다.
| 속성 | 설명 |
|---|---|
| flex-grow | 넓은 공간에 맞춰 크기를 키우도록 설정 (기본 값: 0) |
| flex-shrink | 협소한 공간에 맞춰 크기를 줄이도록 설정 (기본 값: 1) |
| flex-basis | 아이템 크기의 기본 값을 설정 (기본 값: auto) |
| flex | [grow shrink basis]을 한 번에 설정하도록 하는 속기형 속성 (사용 권장) |
| align-self | 아이템에 직접 교차 축 방향 정렬 설정 |
| order | 아이템 배치 순서 설정 |
React Native에서 컴포넌트에 설정 가능한 flex 값은 오직 하나의 숫자만 사용 가능합니다.
<View style={{flex: 1}} />
1
플레이그라운드
Flexbox Playground에서 각 속성이 설정하는 역할을 인터랙티브 하게 반응하는 결과로 살펴볼 수 있습니다.
참고
보다 심도 깊은 학습을 위해 아래 나열된 Flexbox 학습자료를 참고해 읽어보세요.