React Flexy Box

React flexy box is a simple to use flexbox system for your React project based on the original flexybox library

If you've used the bootstrap layout system, then react-flexybox should be relatively familiar.

• Straight forward and familiar API for controlling your layout
• built with styled-components - no css/scss means no need to add special loaders/config
• based off actual uses cases in production apps

Live Demo

https://react-flexybox-demo.netlify.com/

Browser Support

"Chrome >= 48",
"Firefox >= 44",
"Firefox ESR",
"Safari >= 9.1",
"Edge >= 12",
"ios_saf >= 9.3",
"ie 11"

Installation

dependencies: react 15+, styled-components 3+

npm install react-flexybox styled-components

or

yarn add react-flexy-box styled-components

API

<Container />

Optional wrapper

prop	type	values	default	description
fluid	boolean		false	true: sets content to 100% of page width | false: sets a max-width for content
className	string			set the className on the Container Element
style	object			set the style on the Container Element
component	function | string		div	The component to render the Container as

<Row>

Row wraps Cols

prop	type	values	default	description
gutter	number		0
columnDivision	integer		12	allows columns divisions to be overidden (i.e. 24 = smaller columns than 12)
minColWidths	number			override the minWidth for all Cols within the Row
wrap	string	nowrap | wrap | wrap-reverse	wrap	whether flex items should wrap when the window is resized
direction	string	row | row-reverse | column | column-reverse	row
justifyContent	string	flex-start | flex-end | center | space-between | space-around | space-evenly	flex-start	justityContent aligns the items inside a flex container along the x axis
alignContent	string	flex-start | flex-end | center | baseline | stretch	stretch	alignContent aligns the whole structure according to its value and has no effect when items are in a single line
alignItems	string	flex-start | flex-end | center | space-between | space-around | stretch | baseline	stretch	alignItems aligns the items inside a flex container along the y axis just like justifyContent does along the x axis
className	string			set the className on the Row Element
style	object			set the style on the Row Element
debug	boolean		false	adds bounding boxes to help debug layout issues
height	string			allows setting the Row height e.g. height="100px"
component	function | string		div	The component to render the Row as
center	boolean		false	shortcut to center child Col items horizontally and vertically
fill	boolean		false	shortcut that sets Row to height: 100% - (overrides 'height')
padding	string		0	sets padding on Row
paddingTop	string		0	sets padding-top on Row
paddingLeft	string		0	sets padding-left on Row
paddingBottom	string		0	sets padding-bottom Row
paddingRight	string		0	sets padding-right on Row

• <Row gutter={4} minColWidth={100}> sets child Col flex items to margin of 4px and all min-widths to 100px within Row
• <Row justifyContext="center"> center justifies child Col flex items horizontally within the Row
• <Row justifyContext="center" alignItems="center" > center justifies child Col flex items horizontally and vertically within the Row

<Col>

Flex Items

prop	type	values	default	description
order	integer		0	set the order of flex items
alignSelf	string	auto | flex-start | flex-end | center | baseline | stretch	auto	center the alignments for one of the items inside a flexible element
flex	boolean | number		false | 1-12	sets the default flex size
xs	number		1-12	0 - 599px
sm	number		1-12	600 - 959px
md	number		1-12	960px - 1280px
lg	number		1-12	1280px or greater
className	string			set the className on the Col Element
style	object			set the style on the Col Element
component	function | string		div	The component to render the Col as

• <Col flex={6}> sets the default flex size
• <Col flex> sets the item to auto stretch
• <Col flex={6} xs={12}> xs (xs, sm, md, or lg) used togther with flex - you can easily set a default flex size for any size other than the xs breakpoint
• <Col flex={6} order={2}> ... <Col flex={6} order={1}> The last Col will be ordered as first
• values for flex ranges are dependent on columnDivisions

Basic Usage

import { Container, Row, Col } from 'react-flexybox';

UMD Usage

...
<head>
  <link rel="stylesheet" href="https://react-flexybox.netlify.com/react-flexybox.min.js">
</head>
...

// ES6
const {
  Container,
  Row,
  Col,
} = ReactFlexyBox;

//ES Old School
var Container = ReactFlexyBox.Container;
var Row = ReactFlexyBox.Row;
var Col = ReactFlexyBox.Col;

Supported Browsers

react-flexybox is supports on browsers that support flex. It will be up to you to set your autoprefixing appropriatly especially if you use IE 11

Supported Browsers

Contributing

• npm install yarn jest -g
• yarn build-all to generate dist
• yarn build-demo to generate/update demo

Scripts

• yarn build - produces production version of your library under the dist folder
• yarn build-all - produces production & dev version of your library under the dist folder
• yarn dev - produces development version of react-flexybox and runs a watcher
• yarn test - runs the tests
• yarn test:watch - same as above but in a watch mode
• yarn demo:build - builds the demo

Built with react-flexybox

• Galactic Fog's Gestalt Platform

Inspiration

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://v4-alpha.getbootstrap.com/