# styled-flex

> Flexbox - Styled Components

Latest version **0.1.2** (published 2017-02-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install styled-flex
pnpm add styled-flex
yarn add styled-flex
bun add styled-flex
```

## 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.1.2 |
| Published | 2017-02-15 |
| First published | 2017-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kayla Fitzsimmons |
| Maintainers | kfitzi |
| Keywords | flexbox, styled-components |

## Links

- npm: https://www.npmjs.com/package/styled-flex
- npm.io page: https://npm.io/package/styled-flex

## Recent versions

- 0.1.2 (latest) — 2017-02-15
- 0.1.1 — 2017-02-15
- 0.1.0 — 2017-02-09
- 0.0.11 — 2017-02-07
- 0.0.10 — 2017-02-07
- 0.0.9 — 2017-02-07
- 0.0.8 — 2017-02-07
- 0.0.7 — 2017-02-07
- 0.0.6 — 2017-02-07
- 0.0.5 — 2017-02-07
- 0.0.4 — 2017-02-07
- 0.0.3 — 2017-02-07
- 0.0.2 — 2017-02-06
- 0.0.1 — 2017-02-06

## README

# styled-flex
Styled FlexBox Components

Styled components, for flexbox powered container components.

## NPM
```
npm install --save styled-flex
```

## Components

### Flex
```
  <Flex row alignCenter justifyStart>
    ...
  </Flex>
```

```
  <Display column alignStart justifySpaceAround width={"50vw"}>
    ...
  </Display>
```

### Row
```
  <Row alignCenter justifyStart width={"100vw"}>
    ...
  </Row>
```

### Column
```
<Column alignCenter justifyStart flexBasis="0">
  ...
</Column>
```

## Example Usage

### Conditional Layouts
Use with [react responsive](https://github.com/contra/react-responsive)
for conditional layouts

```
  import { Row, Column } from "styled-flex"
  import MediaQuery from "react-responsive"

  export const RowColumn = props => {
    return <div>
            <MediaQuery query="(min-device-width: 1224px)">
              <Row alignCenter
                       {...props}>
                { props.children }
              </Row>
            </MediaQuery>
            <MediaQuery query="(max-device-width: 1224px)">
              <Column alignStart
                       {...props}>
                { props.children }
              </Column>
            </MediaQuery>
          </div>
  }
```

### As A Base Component

my/components.js
```

  import { Row, Column } from "styled-flex"
  import styled from "styled-components"

  const MainContainer = styled(Column)`
    background-color: black;
  `;

  export { MainContainer }

```
my/views/app.js
```

  import { MainContainer } from "my/components"

   export class App extends Component {
    ...
      render() {
          return <MainContainer flexGrow="2" alignStart>
                    { children }
                 </MainContainer>  
         }
    }

```

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