flex

react native의 flex는 웹 css의 display: flex 가 아니다
웹과 비슷하지만 조금 다른..?

react native 에는 inline-box, grid 등이 없고
화면이 모두 flex box로 이루어져 있다

defualt value

flex의 기본 값은 를 사용하는 부모 영역의 높이에 대한 비율로
flex: 1 일 경우 부모 영역 높이의 100% 를 사용하고
0.5 일 경우 half 이런 느낌으로 높이가 정해진다

사용

flex는 숫자를 값으로 갖는데
이 것은 현재 배정된 영역에서의 화면 비율이 된다

만약 전체 레이아웃을 먹는 레벨의 태그에 flex: 1을 준다면
해당 태그는 화면 전체를 채우게 된다

만약 flex를 갖는 형제 태그가 여러개일 때 하나의 flex를 갖는 태그의 값이 있다면

$\frac{해당 태그의 flex 값}{형제 태그들의 flex 값의 총 합}$ 이 현재 태그의 화면 비율이 된다

이런 비율을 사용한다면 어떤 휴대폰 기종이 있더라도 비슷한 화면 구성을 할 수 있을 것이다

flex 는 height 와 같이 상속 되기 때문에
중간 태그에서 flex 를 사용하지 않는다면 밑으로 전달되지 않는다
사용하고자 하는 영역의 모든 계층에서 사용해야 한다