simple-flexbox
TypeScript icon, indicating that this package has built-in type declarations

2.3.3 • Public • Published

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>

Edit simple-flexbox examples

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

me

Germán Llorente

Package Sidebar

Install

npm i simple-flexbox

Weekly Downloads

540

Version

2.3.3

License

MIT

Unpacked Size

41.6 kB

Total Files

10

Last publish

Collaborators

  • llorentegerman