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

Name	Type	Default	Description
space	Number, String Object, Array		Percentage of space consumed
gutters	Boolean	false	Horizontal gutters between flex items
guttersVertical	Boolean	false	Vertical gutters between flex items when stacked
offset	Number, String, Object, Array		Offsets flex item from sibling before
hide	Boolean, Object, Array	false	Whether flex item is visible or not
justify	String, Object, Array	flex-start (Flexbox spec) https://css-tricks.com/snippets/css/a-guide-to-flexbox/	Alignment along the horizontal axis
align	String, Object, Array	stretch (Flexbox spec) https://css-tricks.com/snippets/css/a-guide-to-flexbox/	Alignment along the vertical axis
noWrap	boolean	wrap (Flexbox spec) https://css-tricks.com/snippets/css/a-guide-to-flexbox/	Prevents items from wrapping on horizontal axis

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