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

yarn add styled-flex-component
or
npm i styled-flex-component

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>
);

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

• 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

• rowReverse
• column
• columnReverse

• wrap
• wrapReverse

• alignCenter
• alignStart
• alignEnd
• alignBaseline
• alignStretch
• alignCenter

• contentCenter
• contentStart
• contentEnd
• contentBaseline
• contentStretch
• contentAround

• justifyCenter
• justifyStart
• justifyEnd
• justifyBetween
• justifyAround
• justifyEvenly

• 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

MIT