<Flex /> component built on top of typescript-styled-is. Solve the all problems with custom components which contains some flex styles. Thanks to extending and elasticity of styled-components it's possible to use flex without any hussle!

Installation

To use typescript-styled-flex there is required another two packages - styled-components. Otherwise package has no sense in your project. Depends of your package manager, you can use yarn or npm.

yarn add typescript-styled-flex

npm install typescript-styled-flex

Usage

Package typescript-styled-flex comes with two components: <Flex> and <FlexItem>. The most basic example of using Flex is simple website's skeleton:

import React from 'react'
import Flex from 'typescript-styled-flex'

function App() {
  return (
    <Flex column={true}>
      <Flex alignCenter={true} justifyCenter={true}>Header</Flex>
      <Flex row={true}>
        <Flex column={true}>Sidebar</Flex>
        <Flex>Content</Flex>
      </Flex>
    </Flex>
  )
}

API

<Flex>

Props

• inline: (Boolean) prints "display: inline-flex"
• row: (Boolean) prints "flex-direction: row"
• rowReverse: (Boolean) prints "flex-direction: row-reverse"
• column: (Boolean) prints "flex-direction: column"
• columnReverse: (Boolean) prints "flex-direction: column-reverse"
• nowrap: (Boolean) prints "flex-wrap: nowrap"
• wrap: (Boolean) prints "flex-wrap: wrap"
• wrapReverse: (Boolean) prints "flex-wrap: wrap-reverse"
• justifyStart: (Boolean) prints "justify-content: flex-start"
• justifyEnd: (Boolean) prints "justify-content: flex-end"
• justifyCenter: (Boolean) prints "justify-content: center"
• justifyBetween: (Boolean) prints "justify-content: space-between"
• justifyAround: (Boolean) prints "justify-content: space-around"
• contentStart: (Boolean) prints "align-content: flex-start"
• contentEnd: (Boolean) prints "align-content: flex-end"
• contentCenter: (Boolean) prints "align-content: center"
• contentSpaceBetween: (Boolean) prints "align-content: space-between"
• contentSpaceAround: (Boolean) prints "align-content: space-around"
• contentStretch: (Boolean) prints "align-content: stretch"
• alignStart: (Boolean) prints "align-items: flex-start"
• alignEnd: (Boolean) prints "align-items: flex-end"
• alignCenter: (Boolean) prints "align-items: center"
• alignBaseline: (Boolean) prints "align-items: baseline"
• alignStretch: (Boolean) prints "align-items: stretch"
• full: (Boolean) prints "width: 100%; height: 100%; flex-basis: 100%"
• center: (Boolean) prints "align-items: center; justify-content: center"

<FlexItem>

Props

• inlineBlock (Boolean) prints "display: inline-block"
• inlineFlex (Boolean) prints "display: inline-flex"
• flex (Boolean) prints "display: flex"
• order (Number) prints "order: YOUR_NUMBER"
• basis (Number) prints "flex-basis: YOUR_NUMBER"
• grow (Number) prints "flex-grow: YOUR_NUMBER"
• shrink (Number) prints "flex-shrink: YOUR_NUMBER"
• noShrink (Boolean) prints "flex-shrink: 0"