React Awesome Layout

We all know CSS Flexbox is the great new layout method that gives us the control that we never had before. But the CSS attributes for Flexbox can be confusing sometimes.

react-awesome-layout is designed to eliminate the need of memorizing the awkward css attribute namings and remove the need of implementing flexbox code in your CSS file.

This library provide smart, syntactic component to allow developers to easily and intuitively create responsive and adaptive layouts using Flexbox CSS.

This package is inspired by angular/flex-layout

To gain more understanding about CSS Flexbox, please read a guide to flexbox

Installation

yarn add react-awesome-layout

Usage

<Block layout='row' gutter='8px' wrap>
  <div>Col 1</div>
  <Block layout='row' basis='fill'>
    <div basis='fill'>Nest 1</div>
    <div>Nest 2</div>
  </Block>
  <div>Col 2</div>
</Block>

API for Block

Default value will be used if none provided

| API | Allowed Values | |---|---| | layout | 'row' \| 'column' \| 'row-reverse' \| 'column-reverse'Default: row| | wrap | true \| false \| 'down' \| 'up' \| 'reverse' \| 'none'Default: none | | align | <main-axis> <cross-axis>main-axis: 'start' \| 'end' \| 'center' \| 'around' \| 'between'cross-axis: 'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline'Default: start start | | basis | Length of main-axis in px \| % \| vw \| vhDefault: 100%Behaviour: Take up as much width as possible | | xBasis | Also known as cross-basis, is the length of cross-axis in px \| % \| vw \| vhDefault: autoBehaviour: Take as little space as needed by the block | | gutter | Gutter space between child defined in px |

Please take note

When layout is row | row-reverse, main-axis is width and cross-axis is height; When layout is column | column-reverse, main-axis is height and cross-axis is width.

API for child of Block

| API | Allowed Values | |---|---| | basis | 'fill' \| 'auto' \| px \| % \| vw \| vhDefault: auto | | xBasis | 'auto' \| px \| % \| vw \| vhDefault: auto | | alignSelf | 'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline' \| 'auto'Default: auto | | order | integer valueDefault: 0 |

License

License: MIT