flexbox101

agcb trying to understand flexbox

...like shoes hanging from Telephone Wires

A useful analogy for me has been a wooden box w/ a string tied across from one end to the other. Beads are hanging from the string like shoelaces on Electric Wires. The Box is the Parent. The String is the Main Axis and the beads on the string represent the children. The Parent Container and It's Children. It's children that live on a string.

This, with CSSGrid and the Box Module are the current and near-future.

Starting on the next line i will lay out all possible declarations... #First the Parent Containers.

1. display: flex; /* or inline-flex */
2. flex-direction: row | row-reverse | column | column-reverse;
3. flex-wrap: nowrap | wrap | wrap-reverse;
4. justify-content: flex-start | flex-end | center | space-between | space-around;
5. align-items: flex-start | flex-end | center | baseline | stretch;
6. flex-flow: row wrap;

Now the Children.

1. order: ;
2. flex-grow: ; /* default 0 */
3. flex-shrink: ; /* default 1 */
4. flex-basis: | auto; /* default auto */
5. align-self: auto | flex-start | flex-end | center | baseline | stretch;
6. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Both ending w/ the ShortHands

• One for the Children, and One for the Parent.
• Flex direction and flex wrap can be combined with the shorthand property FLEX-FLOW
• Grow, Shrink, and Basis can be done as simply....FLEX:

Contributions

Many thanks to thomaspark, Chris, and estelle for making things a bit more clear.

I have also found this CheatSheet online.

Documentation

flexbox docs can be found at W3C