flex-stack v2.1.7

Flex Stack is a easy-to-use React component which creates flex-box divs with simple annotations

Stack uses annotation props and converts them to style properties, so you do not have to write long and repetitive css code. You can easily create flex layouts with a few props.

Sample

<Stack  fill  g12  p12  bg='#fefefe'  xs={{ column:  true }}  >
    <Stack  size={10}  bg='Salmon'  color='white'/>
    <Stack  column  g12  p12  fill  bg='SteelBlue'  color='white'  >
	    <Stack  ac  je  g12  p12  size={10}  xs={{ js:  true }}  bg='PaleVioletRed'  color='white'  >
		    <Stack  h={5}  w={5}  bg='Teal'  xs={{ hidden:  true }}  color='white'/>
		    <Stack  h={5}  w={5}  bg='LightGreen'  color='white'/>
		    <Stack  h={5}  w={5}  bg='Plum'  color='white'/>
	    </Stack>
	    <Stack  je  g12  fill  xs={{ column:  true, js:  true }}  color='white'  >
		    <Stack  fill  bg='RebeccaPurple'  color='white'/>
		    <Stack  size='200px'  bg='Olive'  color='white'/>
	    </Stack>
    </Stack>
</Stack  >

Props

The props you can use and which style properties this props add are as follows

Note: Stack props are applied in an order and some props may override previous ones. Use cautiously