[benjaminweb]

Adds examples going through different flex box alignments and other characteristics.

This clarifies greatly for example how to use grow and space for vertical placement of elements.

(I realised this by working through https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

Users benefit from this by copying and starting from a working example instead of fiddling around to find the (yet undocumented) solution for the required layout.

This is of course a working draft. Let me know what could be added.
Also, this could be used as template for defining vertical placement functions in atomic-css directly like center.

[benjaminweb]

/layout is now:

[benjaminweb]

/text is now:

/whitespace-text is now:

[seanhess]

The hope was that grow and space would allow users to do layouts without taking a flexbox tutorial. Seems like it failed for you?

Flexbox obviously has more capabilities, but the goal is to provide an easier interface. I'm thinking we should split the tutorial into two levels:

1. First introduce layouts with space grow. Show how by nesting them you can accomplish arbitrary layouts.
2. Lower down on the page, show advanced flexbox usage.

Would you like to work on that?

[benjaminweb]

I am not sure. I don't feel that I understand it sufficiently enough to explain it by example heathers yet.

What wonders me specifically is the lack of a _center_ing function (like in Elm). To center with grow and space feels cumbersome to me - what is the right / idiomatic way to center horizontally and vertically?

[seanhess]

I'm going to merge this and introduce the space/grow stuff a little earlier. Thanks for doing it!