React Flexbox Component

React Flexbox Component is a library to use flexbox css style to your components with real gutter and xRay option.

Table of Content

- Installing
- Getting started
- Usage
* Props
+ Column width
+ Flex Grow
+ Gutter
+ Align items
+ Align content
+ Flex wrap
+ Justify content
+ xRay

Installing

``
npm install react-flexbox-component
`

Getting started

`jsx
import React, { Component } from 'react'
import { Row, Column, Item } from 'react-flexbox-component'

class MyComponent extends Component {
render() {
return (


)
}
}

export default MyComponent;
`

Usage

`jsx
{/ Direction : Row /}
...

{/ Direction : Column /}
...

{/ Flex item /}
...
`

$3

#### Column width

`
xs >= 0
sm >= 600
md >= 960
lg >= 1280
xl >= 1920
`

Example
`jsx

{/ Auto width for all props xs sm md lg xl /}
Item 1

{/ @media (min-width: 0) flex-grow: 2; /}
Item 2

{/ @media (min-width: 960) {flex-grow: 2}; /}
{/ @media (min-width: 1280) {flex-grow: 4}; /}
Item 3

`

#### Flex Grow

Change flex-grow attribute.
Prop : grow
Value : number
Default : null

`jsx

Item 1
Item 2

`

#### 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 /}

Item 1
Item 2

{/ Margin of 16px between Item 3, Row and Div 1 /}

Item 3

Item 4
Item 5





`

#### Align items

Change align-items attribute.
Value : start | flex-start | end | flex-end | center | baseline | stretch
Default : flex-start

`jsx

Item 1
Item 2

`


#### Align content

Change align-content attribute.
Prop : content
Value : start | flex-start | end | flex-end | center | space-between | space-around | stretch
Default : flex-start

`jsx

Item 1
Item 2

`

#### Flex wrap

Change flex-wrap attribute.
You can use the prop alone.
Prop : wrap
Value : no-wrap | wrap | wrap-reverse
Default : null

`jsx
{/ flex-wrap: wrap-reverse /}

Item 1
Item 2

{/ flex-wrap: wrap /}

Item 3
Item 4

`

#### Justify content

Change justify-content attribute.
Prop: justify
Value : start | flex-start | end | flex-end | space-between | space-around | space-evenly
Default : flex-start

`jsx

Item 1
Item 2

`

#### xRay

Display 1px border and background color to help you to visualize your layout and their childs

`jsx

Item 1
Item 2

``