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. Sets justifyContent style property.
• align - start/end/stretch/center/baseline. Sets alignItems style property.
• auto - Boolean. Sets flex: 1 1 auto
• wrap - Boolean. Sets flex-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. Sets flex: 1 1 auto.
• flex - Boolean. Sets display: flex.
• col - Number. Sets width/flex-basis on a 12 column grid.
• ...<Base/> props - All the props you can pass to base.

License

MIT