FlexView
A powerful React component to abstract over flexbox and create any layout on any browser.
Install
yarn add 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? Our attempt to answer "yes!" to that question gave birth to FlexView.
// flex row
<FlexView />
// flex column
<FlexView column />
// grow, shrink and basis
<FlexView grow shrink basis={100} />
<FlexView grow={2} shrink={1} basis='auto' />
<FlexView basis={100} /> // shrink is set to `false` by default so you're certain to a have it `100px` wide/tall
// wrap
<FlexView wrap />
Remember how difficult it was to center a div inside another div? flexbox definitely improved it, but still having to switch from align-items to justify-content based on flex-direction of the parent is confusing and error prone.
FlexView lets 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 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 | Default | 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
Supported browsers
We removed vendor prefixes in #66, since than we only supports browsers that don't require prefixes for flexbox CSS properties which are most browsers:
- IE 11
- Edge (any version)
- Google Chrome 29+
- Firefox 28+
- Safari 9+
If you need to support older browsers, try with FlexView 3.x.
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:
2 Jul 10, 2022
14 Sep 26, 2022
16 Dec 23, 2022
16.9k Jan 2, 2023
4 Feb 2, 2022
858 Dec 20, 2022
1.4k Dec 10, 2022
1.1k Dec 26, 2022
584 Dec 25, 2022
1.2k Dec 24, 2022
36 Nov 3, 2022
16.9k Jan 1, 2023
649 Jan 7, 2023
38 May 7, 2022
761 Jan 9, 2023
1.5k Dec 15, 2022
274 Dec 21, 2022
532 Jan 8, 2023