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