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 co…


This content originally appeared on DEV Community and was authored by Melbite blogging Platform

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


This content originally appeared on DEV Community and was authored by Melbite blogging Platform


Print Share Comment Cite Upload Translate Updates
APA

Melbite blogging Platform | Sciencx (2022-07-09T13:45:19+00:00) React native flexbox. Retrieved from https://www.scien.cx/2022/07/09/react-native-flexbox/

MLA
" » React native flexbox." Melbite blogging Platform | Sciencx - Saturday July 9, 2022, https://www.scien.cx/2022/07/09/react-native-flexbox/
HARVARD
Melbite blogging Platform | Sciencx Saturday July 9, 2022 » React native flexbox., viewed ,<https://www.scien.cx/2022/07/09/react-native-flexbox/>
VANCOUVER
Melbite blogging Platform | Sciencx - » React native flexbox. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/09/react-native-flexbox/
CHICAGO
" » React native flexbox." Melbite blogging Platform | Sciencx - Accessed . https://www.scien.cx/2022/07/09/react-native-flexbox/
IEEE
" » React native flexbox." Melbite blogging Platform | Sciencx [Online]. Available: https://www.scien.cx/2022/07/09/react-native-flexbox/. [Accessed: ]
rf:citation
» React native flexbox | Melbite blogging Platform | Sciencx | https://www.scien.cx/2022/07/09/react-native-flexbox/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts