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


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


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

export default () => ( World Hello );


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

Flex Container


  • 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


  • row
  • rowReverse
  • column
  • columnReverse


  • 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



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.