https://github.com/SaraVieira/styled-flex-component

Flex Element for not writing any more custom flex styles because fuck that
https://github.com/SaraVieira/styled-flex-component

Last synced: 3 months ago
JSON representation

Flex Element for not writing any more custom flex styles because fuck that

• Host: GitHub
• URL: https://github.com/SaraVieira/styled-flex-component
• Owner: SaraVieira
• License: mit
• Created: 2017-12-04T13:59:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-06-21T20:17:51.000Z (about 3 years ago)
• Last Synced: 2024-03-18T04:43:29.600Z (4 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/styled-flex-component
• Size: 784 KB
• Stars: 209
• Watchers: 4
• Forks: 23
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Lists

• my-awesome-list - Styled Flex Component - Flex Element for not writing any more custom flex styles because fuck that (JS/CSS/HTML - FE in general / React)

README

        
# Styled Flex Component

[![Codecov](https://codecov.io/gh/SaraVieira/styled-flex-component/branch/master/graph/badge.svg)](https://codecov.io/gh/SaraVieira/styled-flex-component) [![Build Status](https://travis-ci.org/SaraVieira/styled-flex-component.svg)](https://travis-ci.org/SaraVieira/styled-flex-component)

Flex Element for not writing any more custom flex styles because fuck that

## Install

```

yarn add styled-flex-component

or

npm i styled-flex-component

```

## Usage

```jsx

import React from 'react';

import Flex, { FlexItem } from 'styled-flex-component';

export default () => (

  

    World

    Hello

  

);

```

## Props

All props without description are just true or false values and take no arguments

### Flex Container

#### General

* full -> Sets width, height and flex basis to 100%

* inline -> Sets the item to inline-flex

* center -> Sets justify-content and align-items to center

#### Direction

* row

* rowReverse

* column

* columnReverse

#### Wrap

* wrap

* wrapReverse

#### Align Items

* alignCenter

* alignStart

* alignEnd

* alignBaseline

* alignStretch

* alignCenter

#### Align Content

* contentCenter

* contentStart

* contentEnd

* contentBaseline

* contentStretch

* contentAround

#### Justify Content

* justifyCenter

* justifyStart

* justifyEnd

* justifyBetween

* justifyAround

* justifyEvenly

### Flex Item

* Order -> Takes a number to se the order of that item

* basis -> Takes a number to se the flex-basis of that item

* grow

* shrink

* noShrink

# License

MIT