Oh no! It looks like JavaScript is not enabled in your browser.
Reload
React Native FlexBox Style Creator
Property selecter
Parent
flexDirection
choose props
none
column
row
column-reverse
row-reverse
justifyContent
choose props
none
flex-start
center
flex-end
space-around
space-between
space-evenly
alignItems
choose props
none
flex-start
center
flex-end
stretch
flexWrap
choose props
none
nowrap
wrap
wrap-reverse
alignContent
choose props
none
flex-start
flex-end
center
stretch
space-between
space-around
Children
text
choose props
child
long text. mega super long text contents
flex
choose props
none
1
2
only
child-2
style prop
flexGrow
choose props
none
0
1
2
3
flexShrink
choose props
none
1
2
3
flexBasis
choose props
none
auto
10
20
30
alignSelf
choose props
none
auto
flex-start
flex-end
center
stretch
baseline
Preview
child-1
child-2
child-3
child-4
parent: { flex: 1, }, chidren: { }, child-2: { },
close
FlexBox
ReactNative
Web