mini-flex package

Use

import { Div } from 'mini-flex'

Use 'Div' component instead of a normal div to wrap your child elements

Styling

It will by default wrap child components into a box so that if you have a text and image child they do not overlap or do silly stuff.

Add the 'layout' and 'spacing' style attributes to any Div component to apply other options.

Grid

'layout: grid, spacing: 10 20'

• builds a dynamic grid to width of the page with side padding 20px and top padding 10px

Bar

'layout: bar, spacing: 10 20'

• builds a horizontal row of child elements with left padding of 20px

Stack

'layout: stack, spacing: 10 20'

• builds a vertical column of child elements with top padding of 10px