Skip to content
Flex Element for not writing any more custom flex styles because fuck that
Branch: master
Clone or download
Latest commit ca4870a Jan 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
src updates Jan 23, 2019
.babelrc
.eslintignore allow custom grow and shrink (#1) Dec 12, 2017
.eslintrc allow custom grow and shrink (#1) Dec 12, 2017
.gitignore
.npmignore
.prettierrc
.travis.yml add tests Dec 5, 2017
LICENSE.md
README.md
package.json 3.0.0 Jan 23, 2019
yarn.lock

README.md

Styled Flex Component

Codecov Build Status

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

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

export default () => (
  <Flex center full>
    <FlexItem order="2">World</FlexItem>
    <FlexItem order="1">Hello</FlexItem>
  </Flex>
);

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

  • 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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.