Spaces Styled

Flex grid components for React built with styled-components

Install

yarn add spaces-styled
or
npm i spaces-styled

Examples

Basic Usage

By default Flex/FlexContent will align in a row and consume an equal amount of space.

import React from 'react';
import { Flex, FlexContent } from 'spaces-styled';

export default () => (
  <Flex>
    <FlexContent />
    <FlexContent />
    <FlexContent />
  </Flex>
);

Nested

Grids can be nested. Flex can be a sibling to FlexContent

<Flex>
  <FlexContent />
  <Flex>
    <FlexContent />
    <FlexContent />
  </Flex>
</Flex>

Prop: space

Number, String, Object, Array Sum greater than 100 will wrap to next line. Works with breakpoints e.g. space={[30, {sm: 50, md: 70}]}. Also accepts: 'self' which will only take up the space of its content. Components: Flex, FlexColumn, FlexContent

<Flex space={50}>
  <FlexContent space={30} />
  <FlexContent space={70} />
</Flex>

Prop: gutters/guttersVertical

Boolean Adds horizontal or vertical gutters. Can be used together. Vertical gutters kick in when items stack. Components: Flex, FlexColumn

<Flex gutters guttersVertical>
  <FlexContent space={30} />
  <FlexContent space={[70, { sm: 100 }]} />
</Flex>

Prop: offset

Number, String, Object, Array Works with breakpoints e.g. offset={[5, {sm: 10, md: 0}]}. Components: Flex, FlexColumn, FlexContent

<Flex>
  <FlexContent />
  <FlexContent offset={[5, { sm: 10, md: 0 }]} />
</Flex>

Prop: hide

Boolean Works with breakpoints e.g. hide={[true, {sm: false}]}. Components: Flex, FlexColumn, FlexContent

<Flex>
  <FlexContent hide={[true, { sm: false }]} />
</Flex>

Prop: justify

String, Object, Array Works with breakpoints e.g. justify={{md: 'space-between'}}. Components: Flex, FlexColumn

// Justifies items with space between
<Flex justify="space-between">
  <FlexContent space={25} />
  <FlexContent space={25} />
</Flex>

Prop: align

String, Object, Array Works with breakpoints e.g. align={{md: 'center'}}. Components: Flex, FlexColumn

// Aligns items on vertical axis
<Flex align="center">
  <FlexContent style={{ height: '100px' }} />
  <FlexContent style={{ height: '200px' }} />
</Flex>

All Props

Flexbox Gotchas

The flexbox spec has had a troubled past. If you're having issues, it's most likely due to a specific browser's implementation and has been captured here: https://github.com/philipwalton/flexbugs

License

MIT