Using Flex like a Pro

Flex defines how much that view would fill the screen.

Space would be divided according to the flex property of each element.

In the following example, the container view has flex: 1.

The red view has flex: 1, the yellow view ha…


This content originally appeared on DEV Community and was authored by Sumrit Grover

Flex defines how much that view would fill the screen.

Space would be divided according to the flex property of each element.

In the following example, the container view has flex: 1.

The red view has flex: 1, the yellow view has flex: 2, and the green view has flex: 3.

1+2+3 = 6, which means that the red view will get 1/6 of the space, the yellow 2/6 of the space, and the green 3/6 of the space.
Image description
Image description

FlexDirection

It is the property which defines the direction in which the child components are laid out.

FlexDirection -"Row"

Align children from left to right.
Image description
Image description

FlexDirection - Column(default)

Align children from top to bottom.
Image description
Image description

Web development has tons of different layout techniques and >tricks available. While in React Native your best tool for >building layouts be will be Flexbox.

DISCLAIMER
Flexbox in React Native is a bit different from CSS Flexbox. Differences are subtle but they are still there.


This content originally appeared on DEV Community and was authored by Sumrit Grover


Print Share Comment Cite Upload Translate Updates
APA

Sumrit Grover | Sciencx (2021-12-09T09:01:16+00:00) Using Flex like a Pro. Retrieved from https://www.scien.cx/2021/12/09/using-flex-like-a-pro/

MLA
" » Using Flex like a Pro." Sumrit Grover | Sciencx - Thursday December 9, 2021, https://www.scien.cx/2021/12/09/using-flex-like-a-pro/
HARVARD
Sumrit Grover | Sciencx Thursday December 9, 2021 » Using Flex like a Pro., viewed ,<https://www.scien.cx/2021/12/09/using-flex-like-a-pro/>
VANCOUVER
Sumrit Grover | Sciencx - » Using Flex like a Pro. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/09/using-flex-like-a-pro/
CHICAGO
" » Using Flex like a Pro." Sumrit Grover | Sciencx - Accessed . https://www.scien.cx/2021/12/09/using-flex-like-a-pro/
IEEE
" » Using Flex like a Pro." Sumrit Grover | Sciencx [Online]. Available: https://www.scien.cx/2021/12/09/using-flex-like-a-pro/. [Accessed: ]
rf:citation
» Using Flex like a Pro | Sumrit Grover | Sciencx | https://www.scien.cx/2021/12/09/using-flex-like-a-pro/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts