styled-flex-component

by SaraVieira

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

215 Stars 19 Forks Last release: Not found MIT License 39 Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 () => ( 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.