React flexbox layout and grid system
npm install prefixed-reflexboxReact flexbox layout and grid system, built with stateless components and inline styles



```
npm install reflexbox
`js
// Example
import React from 'react'
import { Flex, Box } from 'reflexbox'
class Component extends React.Component {
render() {
return (
)
}
}
`
Reflexbox is composed of two React v0.14 stateless function components that can handle virtually any layout composition.
A component that creates a flexbox context to control layout of children.
- wrap (boolean) Sets flex-wrap: wrap.column
- (boolean) Sets flex-direction: column.align
- (string) Sets align-item. Accepted values: stretch, center, baseline, flex-start, flex-endjustify
- (string) Sets justify-content. Accepted values: center, space-around, space-between, flex-start, flex-endgutter
- (number) Sets negative left and right margins to compensate for \sm
- (boolean) Sets display: flex only above the small breakpoint *md
- (boolean) Sets display: flex only above the medium breakpoint *lg
- (boolean) Sets display: flex only above the large breakpoint *auto
- (boolean) Sets flex: 1 1 auto
A component that sets padding and width that works independently or as a child component of \
- auto (boolean) Sets flex: 1 1 autoflex
- (boolean) Sets display: flexalign
- (string) Sets align-self propertyorder
- (number) Sets order propertycol
- (number) Sets width and flex-basis based on a twelve column grid.sm
- (number) Sets width and flex-basis above the small breakpoint based on a twelve column grid. *md
- (number) Sets width and flex-basis above the medium breakpoint based on a twelve column grid. *lg
- (number) Sets width and flex-basis above the large breakpoint based on a twelve column grid. *
Both \
- is (element or node) Passes in a custom element or componentm
- (number) Sets margin based on a scale from 0 – 4. **mx
- (number) Sets x-axis margin based on a scale from 0 – 4. **my
- (number) Sets y-axis margin based on a scale from 0 – 4. **mt
- (number) Sets margin-top based on a scale from 0 – 4. **mb
- (number) Sets margin-bottom based on a scale from 0 – 4. **ml
- (number) Sets margin-left based on a scale from 0 – 4. **mr
- (number) Sets margin-right based on a scale from 0 – 4. **p
- (number) Sets padding based on a scale from 0 – 4. **px
- (number) Sets x-axis padding based on a scale from 0 – 4. **py
- (number) Sets y-axis padding based on a scale from 0 – 4. **pt
- (number) Sets padding-top based on a scale from 0 – 4. **pb
- (number) Sets padding-bottom based on a scale from 0 – 4. **pl
- (number) Sets padding-left based on a scale from 0 – 4. **pr
- (number) Sets padding-right based on a scale from 0 – 4. **style
- (object) Assigns styles to the component *className
- (string) Adds a class to the component *
#### * Breakpoint props
The sm, md, and lg props are based on the keys from the config.breakpoints object.breakpoints
When setting custom values for breakpoints, these props will match the keys of the custom object.
#### ** Spacing scale props
The values for padding and gutter props are based on the length of the config.scale array.
When setting custom values for the spacing scale, the values should be from 0 through the length of the array.
#### * style and className props
The style and className props are added as a convenience and are only recommended for adding color styles.
For other layout styles, prefer using component composition over using these props.
Values for the spacing scale and breakpoints can be configured with
React Context.
To configure reflexbox, add childContextTypes and getChildContext to a container component.
`js
class App extends React.Component {
static childContextTypes = {
reflexbox: React.PropTypes.object
}
getChildContext () {
return {
reflexbox: {
scale: [0, 10, 20, 40, 80],
breakpoints: {
mobile: '(min-width: 30em)',
tablet: '(min-width: 48em)',
desktop: '(min-width: 60em)'
}
}
}
}
render () {
return (
)
}
}
`
Change the root component of Flex or Box with the is prop.
`js`
gutter={2}
align='center'>
px={2}
auto>
Hello
Box
Runs tests with React shallow rendering and browser tests with Karma for four different breakpoints.
```
npm test