Tuesday, September 25, 2018

The Full React Native Flex Layout

The Full React Native  Flex Layout


flex In React Native 
Flexbox is designed to provide a consistent layout on different screen sizes.
  •  flexbox offers three main properties − flexDirection, justifyContent and alignItems.
  • default flexDirection is column

column
column-reverse
row
row-reverse

 justifyContent


  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

 The default value is flex-start

    alignItems

  •   flex-start 
  •   flex-end
  •   center 
  •   stretch



alignSelf
  • flex-start
  • flex-end
  • center
  • stretch

flexWrap
  • wrap
  • nowrap
The default value is nowrap


alignContent
  • flex-start
  • center
  • flex-end
  • stretch
  • space-between
  • space-around













No comments:

Post a Comment