Simple Flexbox

A simple way to make responsive layouts using Flexbox in React. Typescript supported.

Installation

npm install simple-flexbox or yarn add simple-flexbox

Examples

Look at a real UI created with simple-flexbox here: https://llorentegerman.github.io/react-admin-dashboard/ and read the code here: https://github.com/llorentegerman/react-admin-dashboard.

See examples in codesandbox.

There are two main components, Column and Row.

<Row vertical='center' horizontal='spaced'>
	<Column vertical='end'>
    	<span> Content 1 </span>
        <span> Content 2 </span>
    </Column>
    <Column>
    	<span> Content 3 </span>
        <span> Content 4 </span>
        <span> Content 5 </span>
    </Column>
</Row>

Row props

property	accepted values	description
reverse	true or false
vertical	'start', 'center', 'end', 'stretch', 'baseline'	at rows, vertical and alignItems are the same
horizontal	'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'space-evenly'	at rows, horizontal and justifyContent are the same
justifyContent	'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'space-evenly'	at rows, horizontal and justifyContent are the same
alignItems	'start', 'center', 'end', 'stretch', 'baseline'	at rows, vertical and alignItems are the same
alignSelf	'start', 'center', 'end', 'stretch', 'baseline'	other alignment for the cross (vertical) axis
alignContent	'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'stretch'	other alignment for the cross (vertical) axis
flex	string	shorthand for grow, shrink and basis
flexGrow	number	flex-grow
flexShrink	number	flex-shrink
flexBasis	string	flex-basis
wrap	true or false	default: false
wrapReverse	true or false	default: false
any other property	any	i.e.: style={{bakcgroundColor: 'red'}}
breakpoints	array of objects	different styles are applied depending on window.innerWidth, see Breakpoints section below
element	'article', 'aside', 'div', 'figure', 'footer', 'form', 'header', 'main', 'nav', 'section'	Defines to which html tag the styles will be applied. Default: div
componentRef	createRef() or callback ref	reference
children		required

Column props

property	accepted values	description
reverse	true or false
horizontal	'start', 'center', 'end', 'stretch', 'baseline'	at column, horizontal and alignItems are the same
vertical	'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'space-evenly'	at column, vertical and justifyContent are the same
justifyContent	'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'space-evenly'	at column, vertical and justifyContent are the same
alignItems	'start', 'center', 'end', 'stretch', 'baseline'	at column, horizontal and alignItems are the same
alignSelf	'start', 'center', 'end', 'stretch', 'baseline'	other alignment for the cross (horizontal) axis
alignContent	'start', 'flex-start', 'center', 'end', 'flex-end', 'spaced', 'space-between', 'around', 'space-around', 'stretch'	other alignment for the cross (horizontal) axis
flex	string	shorthand for grow, shrink and basis
flexGrow	number	flex-grow
flexShrink	number	flex-shrink
flexBasis	string	flex-basis
wrap	true or false	default: false
wrapReverse	true or false	default: false
any other property	any	i.e.: style={{bakcgroundColor: 'red'}}
breakpoints	array of objects	different styles are applied depending on window.innerWidth, see Breakpoints section below
element	'article', 'aside', 'div', 'figure', 'footer', 'form', 'header', 'main', 'nav', 'section'	Defines to which html tag the styles will be applied. Default: div
componentRef	createRef() or callback ref	reference
children		required

Breakpoints

The breakpoints property allows you to apply styles depending on window.innerWidth.

You must indicate the maximum size for which the styles will be applied, that means that the styles will be applied as long as windows.width <= size, where size is a number. Breakpoints property must have this structure:

{
	size1: { styles1 },
	size2: { styles2 },
	...
	sizeN: { stylesN }
}

you can also use a flexDirection value such as column, column-reverse, row, row-reverse, or a className, in this case, the name of the class cannot be any of the 4 possible values of flexDirection, so, className cannot be any of these column, column-reverse, row or row-reverse.

{
	size1: 'flexDirection value, for example: column, column-reverse, row or row-reverse',
	size2: 'any className except column, column-reverse, row, row-reverse',
	...
	sizeN: 'column, column-reverse, row, row-reverse or className'
}

for example:

<Column breakpoints={{
	850: { flexDirection: 'row', backgroundColor: 'green' },
	600: 'row-reverse'
}}>
	<b>Hello</b>
    <span>world!</span>
</Column>

Breakpoints styles are applied cumulatively, for example, for the Column declared above, these will be the styles, depending on window.innerWidth:

window.innerWidth > 850 --> styles = {}

600 < window.innerWidth <= 850 --> styles = { flexDirection: 'row', backgroundColor: 'green' }

window.innerWidth <= 600 --> styles = { flexDirection: 'row-reverse', backgroundColor: 'green' }

You can see this breakpoints examples in codesandbox.

License

This software is released under the MIT License.

Author

Germán Llorente