Layout Flora ships a couple of layout components that will help implement any design.
Box Box
space prop for spacing between children.
< Box space = { 5 } direction = " row " >
< Box padding = { 10 } extend = { { backgroundColor : 'grey' } } />
< Box
padding = { 10 }
space = { 3 }
direction = " row "
extend = { { backgroundColor : 'grey' } } >
< Box padding = { 10 } extend = { { backgroundColor : 'lightgrey' } } />
< Box padding = { 10 } extend = { { backgroundColor : 'lightgrey' } } />
</ Box >
</ Box >
Grid Grid
< Grid columns = { [ '1fr' , '1fr 1fr 1fr' ] } gap = { 6 } >
< Box bg = " primary " height = { 50 } alignItems = " center " justifyContent = " center " >
< Text color = " white " > Flora </ Text >
</ Box >
< Box
bg = " eucalyptus200 "
height = { 50 }
alignItems = " center "
justifyContent = " center " >
< Text > Design </ Text >
</ Box >
< Box bg = " primary " height = { 50 } alignItems = " center " justifyContent = " center " >
< Text color = " white " > System </ Text >
</ Box >
</ Grid >
Spacer Spacer
space instead.
< Box >
Hello < Spacer size = { 20 } />
World
</ Box >
El El
< El as = " table " >
< El as = " tr " >
< El as = " td " extend = { { border : '1px solid green' } } >
Hello
</ El >
< El as = " td " extend = { { border : '1px solid green' } } >
World
</ El >
</ El >
</ El >