Flexbox by trial

Default

No styles attached, default look:

Basics

Define an OUTER container as a flex container, requires -webkit for Safari

    .class {
      display:-webkit-flex;
      display: flex;
    }
  

Flow

Flexbox can be defined as a row or as a column, so items inside the flexbox will be arranged horizontally (row) or vertically (column). Flex-direction row is set by default.

    .class {
      -webkit-flex-direction: [row|column];
      flex-direction: [row|column];
    }
  

flex-direction: column

Wrap

If flexbox container is small and requires items inside to wrap, flex-flow with wrap is required. Flex-flow also defines direction like flex-direction, so flex-direction is not required.

    .class {
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
    }
  

no wrap

with wrap

Direction

Flex-direction specifies the direction of the flow, for rows default is left to right, reverse is right to left. Reverse works per line, not per element.

    .class {
      -webkit-flex-flow: row-reverse wrap;
      flex-flow: row-reverse wrap;
    }
  

Flex property - flexibility

Combines multiple properties and sets behaviour of the box: grow, shrink, basis. Used for layout (like column layout).

• grow - ratio of growth relative to other items, default is 1
• shrink - ratio of shrinking, default is 1 (not sure how it works yet)
• basis: 100px - sets base width of an element
  auto - distributes "EMPTY" space with grow/shrink ratio
  0 - distributes width of elements with grow/shrink ratio, default
• more info about flex

    .class {
      -webkit-flex: [grow] [shrink] [basis];
      flex-flow: [grow] [shrink] [basis];
    }