react-flex-material

Flex component built for React based on Angular Material Flex Layout which's features provide sugar to enable developers to more easily create modern, responsive layouts on top of CSS3 flexbox.

Installation

react-flex-material is distributed via npm:

$ npm i -S react
$ npm i -S react-flex-material

Configuration

There are several ways to load react-flex-material. Preferable way is using webpack

Webpack with css-loader

import React from 'react';
import {Flex} from 'react-flex-material';
...

Webpack configuration

...
{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
...

In this case required styles will be loaded automatically.

Webpack with css-modules

import React from 'react';
import {Flex} from 'react-flex-material/modules';
...

And webpack configuration

...
module: [{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]!postcss-loader!sass-loader')
  }],
postcss: () => [autoprefixer()]
...

You will need a couple of loaders for webpack:

npm install node-sass sass-loader postcss postcss-loader

Including postcss for autoprefixer to make more browser compatible CSS.

Using library without webpack

In this case you load library without styles

import React from 'react';
import {Flex} from 'react-flex-material/lib/flex';
...

And then load them separately

<link rel="stylesheet" href="node_modules/react-flex-material/lib/flex.css">

Documentation

The library is based on Angular Material Flex Layout. So you can use their documentation as a main source.

Only one change. Since this library is for React, we are using camelCased style instead of snake-cased.

Base attributes are 'layout', 'flex', 'order', 'offset', 'align', 'hide', 'show'

Responsive modifiers '', 'Xs', 'GtXs', 'Sm', 'GtSm', 'Md', 'GtMd', 'Lg', 'GtLg'

Some other attributes 'layoutWrap', 'layoutNoWrap', 'layoutFill', 'layoutMargin', 'layoutPadding'

So you'll get 'layoutXs', 'layoutGtSm', 'flexGtXs', 'flexGtMd', 'orderSm' etc

The value for attributes is the same to Angular Material Flex Layout

<Flex flex flexGtSm="75"> ... </Flex>
<Flex layoutGtXs="row"> ... </Flex>
<Flex layout align="space-between center"> ... </Flex>

Examples

Library has only one Main component called Flex.

By default Flex is just a div. But you can change it via tag attribute

<Flex tag="span"> ... </Flex>

Basic row:

<Flex layout="row">
  <Flex flex>Col 1</Flex>
  <Flex flex>Col 2</Flex>
</Flex>

For row layout, attribute value could be omitted:

<Flex layout>
  <Flex flex>Col 1</Flex>
  <Flex flex>Col 2</Flex>
</Flex>

Row layout with equal columns:

<Flex layout>
  <Flex flex>Col 1</Flex>
  <Flex flex>Col 2</Flex>
</Flex>

Row layout with a specific columns width

<Flex layout>
  <Flex flex="20">
    Col 1
  </Flex>
  <Flex flex="80">
    Col 2
  </Flex>
</Flex>

Row layout with a specific alignment

<Flex layout align="space-between center">
  <div>Col 1</div>
  <div>Col 2</div>
</Flex>

Column layout with a specific alignment

Important: use it only if you need a specific alignment. <Flex layout="column" /> is the same to <Flex /> by default.

<Flex layout="column" align="center center">
  <div>
    Row 1
  </div>
  <div>
    Row 2
  </div>
</Flex>

Special attribute for Flex called divider.

If you want to add some space between components.

<Flex layout align="space-between center">
  <Flex flex>Col 1</Flex>
  <Flex divider />
  <Flex flex>Col 2</Flex>
</Flex>