layout
Flexbox layout components (ported to vdux with some modifications from reflexbox.
Installation
$ npm install vdux-layout
Usage
vdux-layout exports two components, <Flex/>
and <Box/>
. Flex is the container, and box is the child.
import {Flex, Box} from 'vdux-layout'
function render ({props}) {
const {items} = props
return (
<Flex justify='space-between' align='center'>
{
items.map(item =>
<Box auto>
<Tile item={item} />
</Box>
)
}
</Flex>
)
}
- props
-
justify
-start/end/center/space-around/space-between
. SetsjustifyContent
style property. -
align
-start/end/stretch/center/baseline
. SetsalignItems
style property. -
auto
- Boolean. Setsflex: 1 1 auto
-
wrap
- Boolean. Setsflex-wrap: wrap
-
column
- Boolean. Defaults to false, which means row. -
gutter
- Set negative left/right margins to compensate for<Box />
padding. -
...<Base/> props
- All the props you can pass to base.
- props
-
auto
- Boolean. Setsflex: 1 1 auto
. -
flex
- Boolean. Setsdisplay: flex
. -
col
- Number. Sets width/flex-basis on a 12 column grid. -
...<Base/> props
- All the props you can pass to base.
License
MIT