FlexView: the easiest way to use flex with React

A powerful React component to create any layout on any browser using the power of flex.

The problem: doing complex layouts on browsers

Implementing complex layouts in web projects has always been a hassle for developers and designers. To sum up roughly the history of doing layout, we had:

The Jurassic Era: <table>s all the way were used to define rows, columns, sidebars, align elements and whatsoever. At the beginning, not even CSS was available

The Dark Ages: CSS came to the rescue! Many frameworks like Bootstrap and Foundation were based on float elements. While a big jump ahead compared to the Jurassic Era, legends say thousands of developers died while trying to vertically align a span inside a div

The Present: the rise of the CSS flexbox API is a revolution. There’s no reason to not use flexbox nowadays, unless you’re stuck in some huge enterprise project that must support old browsers. If you are, I’m sorry…

(The future? Maybe the CSS grid API, but we’re not here to talk about it)

However, the flexbox API is not 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?

Introducing FlexView: our solution to the problem

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' />

Now that I have your attention let’s dig more into FlexView’s API :)

FlexView is first of all a React component, and like any good React component it’s stateless and works exclusively through props:

You may have already noticed that FlexView API does not reflect completely the flexbox one. After seeing the following example I hope you’ll agree with me that there are good reasons why it doesn’t:

Remember how you used to center a div inside another div?

Horizontally:

<div>
  <div style="margin: 0 auto"></div>
</div>

<!-- or -->

<div style="position: relative">
  <div style="position: absolute; width: 100px; left: 50%; margin-left: -50px;"></div>
</div>

Vertically:

<div style="display: table-cell; vertical-align: middle"> <!-- WTF!?! -->
  <div style="display: inline-block"></div> <!-- // Ok, I'm gonna kill myself... -->
</div>

With flexbox, any alignment can be achieved by using the combination of two awkwardly named properties: align-items and justify-content. Which of them aligns horizontally and which vertically?

It depends on the direction of the element!

justify-content works for main-axis while align-items for the cross-axis.

FlexView takes care of this mess by exposing two intuitive props: hAlignContent and vAlignContent:

Horizontal:

<FlexView hAlignContent='left'>
  <FlexView>left aligned! This is also the default for a row</FlexView>
</FlexView>

<FlexView hAlignContent='center'>
  <FlexView>horizontally centered!</FlexView>
</FlexView>

<FlexView column hAlignContent='right'>
  <FlexView>right aligned (inside a column)</FlexView>
  <FlexView>right aligned (stacked below his sibling)</FlexView>
</FlexView>

Vertical:

<FlexView column vAlignContent='top'>
  <FlexView>top aligned! This is also the default for a column</FlexView>
</FlexView>

<FlexView vAlignContent='center'>
  <FlexView>vertically centered!</FlexView>
</FlexView>

<FlexView column vAlignContent='bottom'>
  <FlexView>at the bottom!</FlexView>
</FlexView>

And of course they can be used together:

Horizontal and Vertical

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

Conclusion

This is just an introduction to the features of FlexView. If you want to discover more about it, you can:

1. jump to the GitHub repository
2. play with it in its playground
3. read the complete documentation

—

If you want to work in a place where we care about the quality of our development workflow, take a look at https://buildo.io/careers