Skip to content
Provides HTML UI layout for React applications; using Flexbox and a Responsive API
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
public
scripts
src
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
package-lock.json
package.json
yarn.lock

README.md

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 | vh
Default: 100%
Behaviour: Take up as much width as possible
xBasis Also known as cross-basis, is the length of cross-axis in px | % | vw | vh
Default: auto
Behaviour: 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 | vh
Default: auto
xBasis 'auto' | px | % | vw | vh
Default: auto
alignSelf 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'auto'
Default: auto
order integer value
Default: 0

License

License: MIT

You can’t perform that action at this time.