** No Longer Maintained **

This project is no longer maintained

React Flex Columns

Writing Custom CSS rules (or CSS-in-JS rules) just for a little flexboxing side-by-side-ness can be a pain. Sure, it doesn't take a lot of CSS to do, but soon you'll be dealing with gutters and centering a responsive stuff. I use React Flex Columns as an abstraction on CSS Flexbox-style columns for add-hoc layout that are not complex enough to justify writing custom CSS rules. This tool is great for a lot of simple use cases but it is not (and will never be) as flexable as the entire CSS Flexbox API. If you need something really custom, then that is a good reason to write your own CSS rules.

Inspired by https://philipwalton.github.io/solved-by-flexbox/demos/grids and https://css-tricks.com/dont-overthink-flexbox-grids

Install

npm install react-flex-columns

Basic Usage

import { Columns, Column } from 'react-flex-columns'

function App() {
  return (
    <Columns>
      <Column flex>Left</Column>
      <Column flex>Right</Column>
    </Columns>
  )
}

<Columns> creates a div with display: flex. The children <Column>'s must be the first level children of <Columns> and create div's that are flex items. Flex items by default will be side-by-side with each other even though the divs are still block-level elements. As flex items, their width will be as wide as their contents unless other properties are provided like flex: 1. In the above example, providing a flex boolean property will create a flex: 1 styling which in this case results in two 50% wide columns. Learning more about Flexbox will help you use this module.

Examples

See the Codesandbox for an interactive example

Btw, why is the gray background color of <Columns> escaping the outer left and right bounds of the container? Because it's using negative margins to offset the columns needing gutters. Does it break your design? No. Practically all grid systems (even the old ones that used floats) do this strategy and it's very normal. You probably just didn't notice with other systems because you didn't put a background on the row itself. If you want to see more about this and other layout strategies, I have a video from a talk I did.

Why

Chances are your App's main layout is sophisticated and requires custom styles. This module is not trying to replace that. Also, chances are you have "UI Components" that are re-usable throughout your application like buttons and pagination. Often times you'll need to arrange those components side-by-side with each other. Perhaps at the bottom of some search results you want a "Add New Thing" button on the left, and to its right you want some pagination.

Writing custom styling for these side-by-side situations each time you need them is too repetitive and difficult to organize since these styles are not coupled to the components themselves, and they're one-offs so they're not apart of your big-picture layout styles also. I call these "micro layouts". Personally, I tend to write styles for components, and for the big layout, but when it comes to organizing components within the layout (with a micro layout), I'd prefer to not write custom styles. I'd rather use an abstraction like this module to "compose" these micro layouts.

Responsive Design

Either implement your own external responsive strategy and do <Columns stack={youControlThisBoolean}> when you want it to stack columns instead of organizing them side-by-side. Or pass stackMaxWidth prop (see below) and specify responsive rules you want the columns to adhere to -- (uses react-media under the hood).

API

There are two React components exported as named exports:

import { Columns, Column } from 'react-flex-columns'

<Columns>

This will return a div with display: flex. Here are some props you can pass it for customization:

<Column>

This will return a div which is a flex-item. Here are some props you can pass it for customization: