FlexBox란?

조민성·2024년 10월 1일

React Native

목록 보기
3/3
  • Flexible Box Module, 즉 한 번에 하나의 행 또는 열을 다루어 박스 내 아이템 공간 배분 및 정렬을 유도하는 레이아웃 모델이다.

RN에서의 FlexBox의 특징

  1. View에서 Flex display를 설정할 때, 이미 모든 View는 기본값이 Flex Container이기 때문에, 일일이 {display: flex}와 같이 지정해 줄 필요가 없다.

  2. Flex Direction의 기준은 Column이다.(웹에서는 Row였음)

  3. 모바일 디바이스들의 크기는 저마다 다르므로, 레이아웃을 설정해줄 때에는 width와 height의 사용을 최대한 지양한다.(아이콘 제외)

  4. flex: x ⇒ 부모 View의 x만큼의 배율로 해당 자식 View를 설정해 준다는 의미.
    4-1. 만약 부모 View가 한 코드에 하나만 존재한다면, 부모 View의 flex를 어떤 숫자로 변 경하더라도 비율에 변화는 생기지 않는다. 당연히 비율을 비교할 다른 View가 존재하지 않으니 까.

profile
사람도 사랑도 계획적으로

0개의 댓글