[React Native] CSS 속성 정리 - 배치, 정렬

flexDirection 

column

해당 옵션이 설정된 자식뷰들을 세로로  배치 (default)

 

row

해당 옵션이 설정된 자식뷰들을 가로로  배치

 

alignItems

flexDirection이 column인지 row인지에 따라 가로 세로 기준이 바뀐다.

flexDirection을 기준으로 수직한 형태로 정렬한다.

예를 들어, flexDirection: column 이라면, 가로로 나열하는 것이니

alignItems는 세로로 정렬하는 옵션이 된다.

 

flex-start

가로 정렬 기준, 좌측(시작점)

 

center

가로 정렬 기준 가운데

 

flex-end

가로 정렬 기준 우측

 

stretch

flex-start 지점부터 flex-end 지점까지 늘림, 단, 이 때 정렬 방향 기준의 값을 정해두지 않아야 적용된다

(예를 들어 세로 기준이면 height를 미지정)

 

justifyContent

flexDirection이 column인지 row인지에 따라 가로 세로 기준이 바뀐다.

flexDirection을 기준으로 수평한 형태로 정렬한다.

예를 들어, flexDirection: column 이라면, 가로로 나열하는 것이니

justifyContent 역시 가로로 정렬하는 옵션이 된다.

 

flex-start - alignItems와 동일하게 동작함

가로 정렬 기준, 좌측(시작점)

 

center - alignItems와 동일하게 동작함

가로 정렬 기준 가운데

 

flex-end - alignItems와 동일하게 동작함

가로 정렬 기준 우측

 

space-between

양 끝을 기점으로 요소간의 거리를 균등하게 정렬

 

space-around

모든 요소를 균등하게 정렬한 뒤 각각을 가운데 정렬함

 

 

#react native 배치 정렬 flexDirection alignItems justifyContent