मुख्य कंटेंट तक स्किप करें

Layout of components - Flexbox

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 flexDirection, alignItems and 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 property.

flexbox foggy

Flexbox works in React Native just like it does CSS on the web, with a few exceptions. The defaults are different: flexDirection defaults to column instead of row, alignContent defaults to flex-start instead of stretch, flexShrink defaults to 0 instead of 1, parameter flex only supports one number.

Flex#

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.

Payment#

Now you are on a stripped-down version of the site, after subscribing to Patreon, you will get full access to the training course, as well as access to our server's private channels in Discord.

Download our mobile application or get tested in our JavaScript telegram bot, and also subscribe to our news.

Become a Patron!

Sumerian school

Contributors ✨#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

📖💲

Become a Patron!