Need help with styled-flex-component?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

SaraVieira
214 Stars 19 Forks MIT License 39 Commits 3 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 7,452
css3
Babel
Svelte
codesan...
33 commits
# 56,974
Shell
serverl...
serverl...
Markdow...
2 commits
# 245,808
TypeScr...
Shell
HTML
1 commit
# 512,657
JavaScr...
TypeScr...
1 commit
# 690,805
JavaScr...
1 commit

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.