# aiws-react-flexbox

> An easy to use flexbox layout

Latest version **0.0.5** (published 2018-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install aiws-react-flexbox
pnpm add aiws-react-flexbox
yarn add aiws-react-flexbox
bun add aiws-react-flexbox
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-05-02 |
| First published | 2018-03-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 38.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | AIW Solutions |
| Maintainers | aiwsolutions |
| Keywords | react, flexbox, flex, layout |

## Links

- npm: https://www.npmjs.com/package/aiws-react-flexbox
- Repository: https://gitlab.com/aiwsolutions/react-flexbox
- Homepage: https://aiwsolutions.github.io/react-flexbox/
- Issues: https://gitlab.com/aiwsolutions/react-flexbox/issues
- npm.io page: https://npm.io/package/aiws-react-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

- 0.0.5 (latest) — 2018-05-02
- 0.0.4 — 2018-03-20
- 0.0.3 — 2018-03-20
- 0.0.2 — 2018-03-20
- 0.0.1 — 2018-03-20

## README

[![CircleCI](https://circleci.com/gh/aiwsolutions/react-flexbox/tree/master.svg?style=svg&circle-token=89de5fc38eb55a41b3b7f395969c3993c0ddcfbf)](https://circleci.com/gh/aiwsolutions/react-flexbox/tree/master)
[![npm version](https://badge.fury.io/js/aiws-react-flexbox.svg)](https://badge.fury.io/js/aiws-react-flexbox)

# react-flexbox
React flexbox layout with intuitive style settings.
There is no fancy compares to other libraries, it is just another way of declaring flexbox layout in react.

# Usage
```
npm install -save aiws-react-flexbox
```
```
import {Flex, Box} from 'aiws-react-flexbox';

...
    <Flex
        justify="center"
        align="center"
        p={1}
    >
        <Box
            pl={1}
            pr={1}
            auto
        />
            Left
        </Box>
        <Box
            ml={1}
        >
            Right
        </Box>
    </Flex>
...

```

# API
## Flex
Property | Corresponding CSS | Value | Meaning
-------- | ----------------- | ---- | -------
column | flex-direction: column/row | true or false | layout content in column or row
reverse | flex-direction: row-reverse/column-reverse |  true or false | layout content in reverse order
wrap | flex-wrap |no-wrap or wrap or wrap-reverse | render items in one line or multiple lines or multiple lines with reversed order
justify | justify-content | flex-start or flex-end or center or space-between or space-around | Specify how the items are aligned in the main axis
align | align-items | flex-start or flex-end or center or space-between or space-around | Specify how the items are aligned in the secondary axis
fullWidth | width: 100% | true or false | take the width of the parent
inline | display: inline-flex | |
col | width: (col * 100 / 12)% | 1..12 |
auto | flex: 1 1 auto | true or false | take all available space of the parent

## Box
Property | Corresponding CSS | Value | Meaning
-------- | ----------------- | ---- | -------
order | order | number | controls the order in which they appear in the flex container
auto | flex: 1 1 auto | true or false | take all available space of the parent
grow | flex-grow:  | number |
shrink | flex-shrink: | number |
basis | flex-basis: | string or number |
align | align-self: | auto or flex-start or flex-end or center or baseline or stretch

## Margin & Padding (same for both)
Property | Corresponding CSS | Example
-------- | ----------------- | -------
m={x} | margin: (x * 8)px    | m={1} means margin: 8px
p={x} | padding: (x * 8)px   | p={1} means padding: 8px
ml, mr, mt, mb | margin-left, margin-right, margin-top, margin-bottom | ml={1}  means margin-left: 8px
pl, pr, pt, pb | padding-left, padding-right, padding-top, padding-bottom | pt={1} means padding-top: 8px

## Overriden
Property | Example
-------- | -------
style | style={margin: 4}  means final style will have margin with 4px regardless other settings

# Run example locally
```
npm install
npm run serve
```
then navigate to http://localhost:8080

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