DEV Community

Cover image for React native flexbox
Melbite blogging Platform
Melbite blogging Platform

Posted on • Originally published at melbite.com

2 1

React native flexbox

Intro

Today is actually a day i enjoyed. I gained the knowledge on flexbox in react native. according to the documentation flex defines how items are going to fill over available space along main axis. In react native,the main axis is the column.

MAIN - flex:1
   item-1:flex-1
   item-2:flex-2
   item-3:flex-3

1+2+3=6
item-1 - 1/6
item-2 - 2/6
item-3 - 3/6

Enter fullscreen mode Exit fullscreen mode
  • flexDirection - column,row,row-reverse
  • layoutDirection - LTR,RTL
  • justifyContent - align along main axis - flex-start,flex-end,center
  • alignItems - along cross axis.
  • alignSelf - individual item.
  • alignContent - flexWrap must be present. defines distribution along cross-axis.
  • flexWrap
  • flexBasis - axis independ way of providing the size of an item. if direction=column,height else width.
  • flexGrow - how item grows in relation to siblings. If 2,grows 2 times larger than siblings.
  • flexShrink

position

position : absolute | relative.

size

width|height:'100| "10%" | auto'

Article originally published at melbite.com/react-native-flexbox

Check more articles just like this on https://melbite.com

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay