DEV Community 👩‍💻👨‍💻

Sumrit Grover
Sumrit Grover

Posted on

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 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.

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.