react-styled-box
What is it ?
This is a simple styled.div component, that makes your basic positioning of
elements faster. Instead of writing all of the "styled" components upfront you
can prototype the layout faster with this ready <Box>.
How it works ?
import Box from 'react-styled-box'; <Box ="column"> <Box ="row"> <span> header </span> <span> header 2 </span> </Box> <Box => <Box = ="10px 0 0 0"> Item one </Box> <Box = ="10px 0 0 0"> Item two </Box> </Box></Box> What does it support ?
Check A Complete Guide to FlexBox
| propType | valid types | sample values | description |
|---|---|---|---|
display |
string | 'flex', 'block' |
flex - default value |
margin |
integer, string | 10, '50%' |
number values are suffixed with px |
padding |
integer, string | 10, '50%' |
number values are suffixed with px |
width |
integer, string | 10, '50%' |
number values are suffixed with px |
maxWidth |
integer, string | 10, '50%' |
number values are suffixed with px |
minWidth |
integer, string | 10, '50%' |
number values are suffixed with px |
height |
integer, string | 10, '50%' |
number values are suffixed with px |
maxHeight |
integer, string | 10, '50%' |
number values are suffixed with px |
minHeight |
integer, string | 10, '50%' |
number values are suffixed with px |
flexDirection |
string | 'row', 'column' |
|
flexWrap |
string | 'nowrap', 'wrap' |
|
flexFlow |
string | 'column nowrap', 'row wrap' |
|
justifyContent |
string | 'flex-start', 'center' |
|
alignItems |
string | 'base-line', 'flex-start' |
|
alignContent |
string | 'flex-start', 'space-around' |
|
order |
integer | 1, 2 |
|
flexGrow |
integer | 1, 2 |
|
flexShrink |
integer | 1, 0 |
|
flexBasis |
integer, string | 30, 'auto', '30%' |
number values are suffixed with px |
flex |
string | '0 1 auto', '1 0' |
|
alignSelf |
string | 'auto', 'flex-start' |
|
overflow |
string | visible, hidden |
|
overflowX |
string | visible, hidden |
|
overflowY |
string | visible, hidden |