Justify-content(RN의 속성 이름: justifyContent) 주 축 정렬
교차 축에서 align-items(RN의 속성 이름: alignItems) 정렬
React Native에서 컨테이너의 주축 방향이 설정되지 않은 경우 기본 컨테이너 주축 방향은 다음과 같습니다. flexDirection 속성을 생략할 수 있습니다.
1. FlexBox 레이아웃이란?
Flexbox는 Flexible Box의 약자로 "탄력적인 레이아웃"을 의미하며 박스 모델에 최대의 유연성을 제공하기 위해 사용됩니다. 플렉스 레이아웃을 채택하는 요소를 플렉스 컨테이너 또는 줄여서 "컨테이너"라고 합니다. 모든 하위 요소는 자동으로 플렉스 항목(플렉스 항목) 또는 줄여서 "항목"이라고 하는 컨테이너의 구성원이 됩니다.
다음은 FlexBox 텔레스코픽 레이아웃의 샘플 다이어그램입니다.
Flex 컨테이너에는 기본적으로 두 개의 축이 있습니다.
가로 방향의 주축과 주축에 대한 수직 방향의 교차 축.
주축의 배치 방향은 왼쪽에서 오른쪽, 교차축의 배치 방향은 위에서 아래로 기본적으로 플렉스 컨테이너의 item 요소들은 주축의 방향에 따라 정렬된다. 주축의 공간을 주사이즈라 하고, 아이템이 가로축을 차지하는 공간을 가로사이즈라고 합니다.
2. 주로 사용되는 플렉스 컨테이너 속성:
1.flex-direction(RN의 속성 이름: flexDirection)
- 열: 주축은 수직이고 시작점은 위쪽 가장자리에 있습니다.
- column-reverse: 주축이 수직이고 시작점이 하단에 있습니다.
- 행: 주축은 수평이고 시작점은 왼쪽 끝에 있습니다.
- row-reverse: 주축이 수평이고 시작점이 오른쪽 끝에 있음
참고: React Native에서 컨테이너의 주축 방향이 설정되지 않은 경우 기본 컨테이너 주축 방향은 flexDrection: 'column', 즉 우리 컨테이너의 주축이 세로 방향으로 정렬된 경우 그런 다음 flexDirection 속성을 생략할 수 있습니다.
2.flex-wrap(RN의 속성 이름: flexWrap)
기본적으로 컨테이너의 항목 요소는 하나의 축에 정렬되며 flex-wrap 속성은 모든 항목 요소를 하나의 축에 정렬할 수 없는 경우 새 줄에 정렬할 수 있도록 정의합니다.
- 줄 바꿈
- nowrap은 포장하지 않습니다
- wrap-reverse 아래의 첫 줄을 래핑합니다.
3. justify-content(RN의 속성 이름: justifyContent) 주 축 정렬
- flex-start(기본값): 왼쪽 정렬
- flex-end: 오른쪽 정렬
- 중심: 중심
- space-between: 양쪽 끝이 정렬되고 항목 사이의 간격이 동일합니다.
- space-around: 각 항목의 양쪽 간격이 동일합니다. 항목 사이의 간격은 항목과 테두리 사이의 간격보다 2배 큽니다.
4. 교차 축에서 align-items(RN의 속성 이름: alignItems) 정렬
- flex-start: (기본값) 교차 축의 시작점이 정렬됩니다.
- flex-end: 교차축의 끝을 맞춥니다.
- center : 교차축의 중간점 정렬
- 기준선: 항목에 있는 첫 번째 텍스트 줄의 기준선 정렬
- stretch: 항목의 높이가 설정되지 않았거나 자동으로 설정되면 전체 컨테이너의 높이를 차지합니다.
3. 주로 사용하는 아이템(Item) 속성
1.플렉스
Use flex: 1 in RN: 하나의 요소만 flex: 1을 사용하는 경우 이 요소는 전체 화면을 채우고, flex: 1을 사용하는 요소가 여러 개인 경우 여러 요소가 화면 공간을 균등하게 나눕니다.
2.alignSelf 항목 자체의 축 정렬
auto 속성을 추가한 것을 제외하고 나머지는 align-items 속성과 완전히 동일하며, 특정 얼라인먼트는 교차축의 방향과 관련이 있다.
- flex-start: (기본값) 교차 축의 시작점이 정렬됩니다.
- flex-end: 교차축의 끝을 맞춥니다.
- center : 교차축의 중간점 정렬
- 기준선: 항목에 있는 첫 번째 텍스트 줄의 기준선 정렬
- stretch: 항목의 높이가 설정되지 않았거나 자동으로 설정되면 전체 컨테이너의 높이를 차지합니다.
alignitems를 재정의하여 자체 컨트롤의 차이점을 정의합니다.
참조 링크: