Make flexbox an explicit behavior on Box

[kettanaito]

Why

Enforcing all area components behave like flex results into broken layouts by default.

Environment

• atomic-layout version: 0.3.8

Expected behavior

Flex behavior doesn't interfere with the existing layouts.

How

1. Turn off flexbox display by default, make it parametric with the explicit prop (i.e. flex).
2. Set flex-direction: column by default. However, this, most likely, will not eliminate the issue.

[kettanaito]

Implemented and released under 0.3.9.

I would keep this issue open, since I feel there can be a better way of handling flexbox.

[kettanaito]

So far the usage of the Flexbox display model seems transparent and comfortable. Closing.

import { Box } from 'atomic-layout'

const Header = () => (
  <Box flex alignItems="center" justifyContent="end">
    {/* ... */}
  </Box>
)