Summary: in this tutorial, you will learn how to use the Flexbox model to arrange components in your mobile apps.
React Native uses the Flexbox layout algorithm to create layouts for components. Flexbox in React Native is similar to the one for the web with some minor differences:
| Feature | React Native | Web |
|---|---|---|
| The display property | Implicitly include display: 'flex' | Must explicitly specify display: flex |
| Default flex direction | Default to column: flexDirection: 'column' | Default to row: flex-direction: row |
| Flex property | Accept one value: flex: flex-basis | One to three values:flex: flex-grow flex-shrink flex-basis |
Flex container and items
When a component has the display: 'flex', it becomes a flex container. All direct children will be the flex items:
