21.12.21 flex-속성

flex-direction

//default
flex-direction: column;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column-reverse;

default로 View 태그 안의 요소들은 모두 (1, 1) (2, 1) (3, 1) 처럼 세로 줄 하나로 정렬된다. 

 

flex-direction: row;

으로 바꾼다면 View 태그 안의 요소들은 모두 (1, 1) (1, 2) (1, 3) 처럼 가로 줄 하나로 정렬된다. 

 

 

flex-wrap

default는 모든 요소들은 한 줄에 정렬된다. 

//default
flex-wrap: nowrap; //한 줄에 모두 정렬
flex-wrap: wrap; //여러 줄에 걸쳐 정렬
flex-wrap: wrap-reverse; //여러 줄에 걸쳐 거꾸로 정렬

 

//같이 사용
flex-direction: row;
flex-wrap: wrap;

을 같이 사용하여 전체 컨테이너의 넓이에서 벗어나는 요소를 아래로 줄바꿈해줄 수 있다.

이것을 한 줄로 나타낸 것이 아래 flex-flow 속성이다. 

 

flex-flow

//넓이 벗어나면 아래로 바꿔 줌. 
flex-flow: row wrap;
//높이를 벗어나면 오른쪽으로 바꿔 주는 것은
flex-flow: column wrap;

 

https://reactnative.dev/docs/layout-props#flexgrow

Layout Props · React Native