# simple-flexbox

> A simple way to make responsive layouts using Flexbox in React

Latest version **2.3.3** (published 2021-07-09) · MIT license · 544 weekly downloads

## Install

```sh
npm install simple-flexbox
pnpm add simple-flexbox
yarn add simple-flexbox
bun add simple-flexbox
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.3 |
| Published | 2021-07-09 |
| First published | 2017-12-27 |
| Weekly downloads | 544 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 40.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Germán Llorente |
| Maintainers | llorentegerman |
| Keywords | flexbox, react, simple-flexbox, simple, layout |

## Links

- npm: https://www.npmjs.com/package/simple-flexbox
- Repository: https://github.com/llorentegerman/simple-flexbox
- Homepage: https://github.com/llorentegerman/simple-flexbox#readme
- Issues: https://github.com/llorentegerman/simple-flexbox/issues
- npm.io page: https://npm.io/package/simple-flexbox

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.3.3 (latest) — 2021-07-09
- 2.3.2 — 2020-08-03
- 2.3.1 — 2020-04-07
- 2.3.0 — 2019-09-09
- 2.2.1 — 2019-07-29
- 2.2.0 — 2019-07-26
- 2.1.1 — 2019-07-19
- 2.1.0 — 2019-07-16
- 2.0.0 — 2019-06-05
- 1.3.0 — 2019-03-26
- 1.2.0 — 2018-01-23
- 1.1.1 — 2018-01-18
- 1.1.0 — 2018-01-18
- 1.0.6 — 2018-01-09
- 1.0.5 — 2018-01-09
- … 5 more at https://npm.io/package/simple-flexbox/versions

## README

## 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/](https://llorentegerman.github.io/react-admin-dashboard/) and read the code here: [https://github.com/llorentegerman/react-admin-dashboard](https://github.com/llorentegerman/react-admin-dashboard).

See examples in [codesandbox](https://codesandbox.io/s/z3p04l3vol).

There are two main components, `Column` and `Row`.

```html
<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](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/z3p04l3vol)

# 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](https://codesandbox.io/s/z3p04l3vol).

License
-------
This software is released under the [MIT License](https://github.com/llorentegerman/simple-flexbox/blob/master/LICENSE).

Author
-------
![me](https://avatars3.githubusercontent.com/u/21162888?s=100&v=4)

[Germán Llorente](https://github.com/llorentegerman)

---
_Source: https://npm.io/package/simple-flexbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._