This is a new technology that already has fairly broad browser support. Flexbox provides tools to quickly create complex, flexible layouts, and features that were difficult in traditional CSS techniques. This article explains all the basics of this technology.
A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout across different screen sizes.
Typically you will use a combination of
justifyContent to achieve the correct layout.
Before we continue, I suggest you play the game Flexbox Froggy. The task of the game is to move frogs onto lily leaves using the
Flexbox works in React Native just like it does CSS on the web, with a few exceptions. The defaults are different:
flexDirectiondefaults to column instead of row,
flexonly supports one number.
flex will determine how your items will "fill" the available space along your main axis. The space will be split based on the flex property of each item.
In the following example, red, yellow, and green
View are children in the container view set to
flex: 1. The red view uses
flex: 1, the yellow view uses
flex: 2, and the green view uses
flex: 3. 1 + 2 + 3 = 6, which means that the red view will take up 1/6 of the space, the yellow 2/6 of the space and the green 3/6 of the space.
Thanks goes to these wonderful people (emoji key):