React Flexbox Component is a library to use flexbox css style to your components with real gutter and xRay option.
npm install react-flexbox-componentReact Flexbox Component is a library to use flexbox css style to your components with real gutter and xRay option.
- Installing
- Getting started
- Usage
* Props
+ Column width
+ Flex Grow
+ Gutter
+ Align items
+ Align content
+ Flex wrap
+ Justify content
+ xRay
```
npm install react-flexbox-component
`jsx
import React, { Component } from 'react'
import { Row, Column, Item } from 'react-flexbox-component'
class MyComponent extends Component {
render() {
return (
export default MyComponent;
`
`jsx
{/ Direction : Row /}
{/ Direction : Column /}
{/ Flex item /}
`
#### Column width
``
xs >= 0
sm >= 600
md >= 960
lg >= 1280
xl >= 1920
Example
`jsx
{/ Auto width for all props xs sm md lg xl /}
{/ @media (min-width: 0) flex-grow: 2; /}
{/ @media (min-width: 960) {flex-grow: 2}; /}
{/ @media (min-width: 1280) {flex-grow: 4}; /}
`
#### Flex Grow
Change flex-grow attribute.grow
Prop :
Value : number
Default : null
`jsx`
#### Gutter
Add a margin between boxes in pixel. Allowed for Row and Column and applied on direct children.
`jsx`
{/ Margin of 8px between Item 1 and Item 2 /}
{/ Margin of 16px between Item 3, Row and Div 1 /}
Div 1
#### Align items
Change align-items attribute.start
Value : | flex-start | end | flex-end | center | baseline | stretchflex-start
Default :
`jsx`
#### Align content
Change align-content attribute.content
Prop : start
Value : | flex-start | end | flex-end | center | space-between | space-around | stretchflex-start
Default :
`jsx`
#### Flex wrap
Change flex-wrap attribute.wrap
You can use the prop alone.
Prop : no-wrap
Value : | wrap | wrap-reverse
Default : null
`jsx`
{/ flex-wrap: wrap-reverse /}
{/ flex-wrap: wrap /}
#### Justify content
Change justify-content attribute.justify
Prop: start
Value : | flex-start | end | flex-end | space-between | space-around | space-evenlyflex-start
Default :
`jsx`
#### xRay
Display 1px border and background color to help you to visualize your layout and their childs
`jsx``