flex
주 축을 따라 사용가능한 공간을 채울 방법을 정의한다
View(container) 안에 세 개의 View를 배치한다.
빨간색(flex: 1), 주황색(flex: 2), 초록색(flex: 3)으로 만든 경우, 주어진 상위의 View를
1+2+3=6으로 나눈 영역을 1개, 2개, 3개 가진다고 생각하면 된다.
정렬
기본적으로 React Native안에서는 flexDirection : column을 기본값으로 배치한다.
아이템을 배치하면 위에서 차례로 쌓이게 된다.
justify-content
flex-direction의 방향대로 정렬하는 방법은 justify-content로 결정한다.
(flex-direction: row 인 경우 row방향(가로)으로 어떻게 배치할 것인가를 정한다)
align-items
flex-direction 방향의 수직방향으로 어떻게 정렬할 것인지 정한다
(flex-direction: row인 경우, 세로 배치를 설정함)
baseline의 경우는 각 item의 text를 기준점으로 정렬한다.
참고한 사이트
https://reactnative.dev/docs/flexbox
Layout with Flexbox · React Native
A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
reactnative.dev
https://dev.to/virensuthar/get-started-with-flexbox-3in5
Get started with Flexbox.
What is Flexbox? Flexbox is a layout in CSS3. Flexbox is used to make responsive layouts a...
dev.to
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) a…
css-tricks.com
'React Native' 카테고리의 다른 글
| React Native - styled component (0) | 2021.12.07 |
|---|---|
| React Native - 그림자 속성과 Platform (0) | 2021.12.07 |
| React Native - style 적용하기 (0) | 2021.12.06 |
| React Native - 이벤트 (0) | 2021.12.03 |
| React Native - State (0) | 2021.12.03 |