FlexView

A powerful React component to abstract over flexbox and create any layout on any browser.

Install

npm i --save react-flexview

Why

The flexbox API is powerful but far from being perfect. The API is complex and there are still many inconsistencies between browsers that force developers to overuse vendor prefixes and literally do magic tricks to achieve the desired layout.

For these reasons, we asked ourselves: is there a way to simplify the API and handle any browser inconsistency in a single place?

Here's a typical CSS snippet using flexbox:

.flex-view {
  /* flex */
  display: flexbox;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  /* direction */
  webkit-box-flex-direction: row;
  moz-box-flex-direction: row;
  ms-flex-direction: row;
  webkit-flex-direction: row;
  flex-direction: row;

  /* grow, shrink, basis */
  webkit-box-flex: 1 1 200px;
  moz-box-flex: 1 1 200px;
  ms-flex: 1 1 200px;
  webkit-flex: 1 1 200px;
  flex: 1 1 200px;
}

And this is how you do it with FlexView:

<FlexView grow shrink basis='200' />

Remember how difficult it was to center a div inside another div?

FlexView let's you align and center children with two intuitive props: vAlignContent and hAlignContent

<FlexView hAlignContent='center' vAlignContent='center'>
  <FlexView>the center of the Earth</FlexView>
</FlexView>

How to use

In your app.js:

import 'react-flexview/lib/flexView.css' // FlexView is useless without its style

In your component:

import React from 'react';
import FlexView from 'react-flexview';

export default class Component extends React.Component {
  render() {
    return (
      <FlexView vAlignContent='center'>
        I'm vertically centered!
      </FlexView>
    );
  }
}

Props

Name	Type	Description
children	`ReactChildren`	required. FlexView content
column	`Boolean`	optional. Flex-direction: column
vAlignContent	`enum("top" \| "center" \| "bottom")`	optional. Align content vertically
hAlignContent	`enum("left" \| "center" \| "right")`	optional. Align content horizontally
marginLeft	`union(String \| Number)`	optional. Margin-left property ("auto" to align self right)
marginTop	`union(String \| Number)`	optional. Margin-top property ("auto" to align self bottom)
marginRight	`union(String \| Number)`	optional. Margin-right property ("auto" to align self left)
marginBottom	`union(String \| Number)`	optional. Margin-bottom property ("auto" to align self top)
grow	`union(Boolean \| Number)`	optional. Property (for parent primary axis)
shrink	`union(Boolean \| Number)`	optional. Flex-shrink property
basis	`union(String \| Number)`	optional. Flex-basis property
wrap	`Boolean`	optional. Wrap content
height	`union(String \| Number)`	optional. Height property (for parent secondary axis)
width	`union(String \| Number)`	optional. Width property (for parent secondary axis)
className	`String`	optional. Additional `className` for wrapper element
style	`Object`	optional. Inline-style overrides for wrapper element

Demo

Here's a live playground

Documentation

Refer to the Book of FlexView

Used By

At buildo we've been using FlexView in production in every web application we built since July 2015 (it was in a different repo back then).

As of today, FlexView has replaced the div as the brick of our projects and, thanks to it, our developers can finally build without too much trouble complex layouts that work the same on Chrome, Firefox, Safari and Internet Explorer 11.

You can see it in action here:

nigelramdial/react-flexview