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.