리액트 네이티브 flex box 정리

Flexbox는 레이아웃을 구성할 때 매우 강력한 도구로, 다양한 화면 크기와 해상도에 대응할 수 있도록 해준다. 주로 flexDirection, justifyContent, alignItems, flex, flexWrap 등의 속성을 설정하여 레이아웃을 조절한다.

1. flexDirection: 이 속성은 자식 요소들이 배치되는 방향을 결정한다. 기본값은 column으로, 위에서 아래로 쌓인다. row로 설정하면 왼쪽에서 오른쪽으로 배치된다.
2. justifyContent: 이 속성은 주 축(main axis) 방향으로 자식 요소들이 어떻게 정렬되는지를 설정한다. 예를 들어, center로 설정하면 중앙에 정렬되고, space-between으로 설정하면 요소들 사이에 균등한 간격을 둔다.
3. alignItems: 이 속성은 교차 축(cross axis) 방향으로 자식 요소들이 어떻게 정렬되는지를 설정한다. flex-start, center, flex-end, stretch 등을 사용하여 정렬을 조절할 수 있다.
4. flex: 이 속성은 자식 요소가 남은 공간을 얼마나 차지할지를 설정한다. flex: 1로 설정하면 자식 요소가 가능한 모든 공간을 차지하게 된다.
5. flexWrap: 이 속성은 자식 요소들이 주 축 방향으로 넘칠 때 어떻게 처리할지를 설정한다. nowrap(기본값)으로 설정하면 넘치는 요소들이 한 줄에 표시되며, wrap으로 설정하면 다음 줄로 넘어가게 된다.

Flexbox를 잘 활용하면 다양한 화면 크기와 방향에서도 일관된 레이아웃을 유지할 수 있다. 각 속성들을 조합하여 원하는 레이아웃을 쉽게 구현할 수 있다.