Package Exports

styled-flex-component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (styled-flex-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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

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