Package Exports

reflexbox

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (reflexbox) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

reflexbox

React flexbox layout and grid system, built with stateless components and inline styles

Getting Started

npm install reflexbox

// Example
import React from 'react'
import { Flex, Box } from 'reflexbox'

class Component extends React.Component {
  render() {
    return (
      <Box p={2}>
        <Flex align='center'>
          <Box px={2}>Box A</Box>
          <Box px={2} fill>Box B</Box>
        </Flex>
      </Box>
    )
  }
}

Reflexbox is composed of two React v0.14 stateless function components that can handle virtually any layout composition.

<Flex />

A component that creates a flexbox context to control layout of children.

Props

wrap (boolean, default false) Sets flex-wrap: wrap.
column (boolean, default false) Sets flex-direction: column.
align (string, default null) Sets align-item. Accepted values: stretch, center, baseline, flex-start, flex-end
justify (string, default null) Sets justify-content. Accepted values: stretch, center, baseline, flex-start, flex-end
gutter (number, default null) Sets negative left and right margins to compensate for <Box /> padding.
sm (boolean, default false) Sets display: flex only above the small breakpoint
md (boolean, default false) Sets display: flex only above the medium breakpoint
lg (boolean, default false) Sets display: flex only above the large breakpoint

<Box />

A component that sets padding and width that works independently or as a child component of <Flex />.

Props

fill (boolean, default false) Sets flex: 1 1 auto
p (number, default null) Sets padding based on a scale from 0 – 4.
px (number, default null) Sets x-axis padding based on a scale from 0 – 4.
py (number, default null) Sets y-axis padding based on a scale from 0 – 4.
pt (number, default null) Sets padding-top based on a scale from 0 – 4.
pb (number, default null) Sets padding-bottom based on a scale from 0 – 4.
pl (number, default null) Sets padding-left based on a scale from 0 – 4.
pr (number, default null) Sets padding-right based on a scale from 0 – 4.
col (number, default null) Sets width and flex-basis based on a twelve column grid.
sm (number, default null) Sets width and flex-basis above the small breakpoint based on a twelve column grid.
md (number, default null) Sets width and flex-basis above the medium breakpoint based on a twelve column grid.
lg (number, default null) Sets width and flex-basis above the large breakpoint based on a twelve column grid.

Tests

Runs React shallowRender and browser tests with Karma for four different breakpoints.

npm test

MIT License