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>
.
import Box from 'react-styled-box';
<Box flexDirection="column">
<Box flexDirection="row">
<span> header </span>
<span> header 2 </span>
</Box>
<Box flexGrow={1}>
<Box margin={10} padding="10px 0 0 0">
Item one
</Box>
<Box margin={10} padding="10px 0 0 0">
Item two
</Box>
</Box>
</Box>
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 |