useful css for react native자주 사용하는 CSS

자주 사용하는 css 속성정리

flexDirection 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향

justifyContent 가로 축을 기준으로 좌우에 대한 정렬

-prop
flex-start (default) : 요소들을 컨테이너의 왼쪽으로 정렬
flex-end : 요소들을 컨테이너의 우측으로 정렬
center : 요소들을 컨테이너의 중앙으로 정렬
space-between : 요소들 사이에 동일한 간격을 둡니다.
space-around : 요소들 주위에 동일한 간격을 둡니다.
space-evenly(FireFox Only) : 첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과
마지막 정렬 대상 이후의 간격이 같도록 항목이 분산 됩니다.

alignItems 내부 항목의 정렬의 위치를 지정

-prop
flex-start : 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치됩니다.

flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치됩니다.
center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치됩니다.
space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치됩니다.
space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치됩니다.

textalign 텍스트의 기준정렬
-prop
left: 왼쪽 정렬
right: 오른쪽 정렬
center: 중앙 정렬
justify: 양쪽 정렬

flex 항목에 대한 비율을 결정
-prop
row(default) : 가로방향으로 정렬(좌->우)
row-reverse : 가로방향으로 정렬(우->좌)
column : 세로방향으로 정렬(상->하)
column-reverse : 세로방향으로 정렬(하->상)