Flexbox

What is Flexbox?

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

Direction-agnostic, as opposed to the block layout, which is vertically-biased, or the inline layout, which is horizontally-biased.
There are no floating elements on the page.
Elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
Performance wise the browser needs to make less calculations.

Inside of 1 container, we want 3 divs whose horizontal padding is equal, and adjusts to the size of the containing div.
Horizontal Spacing

Inside of 1 container, we want 3 divs whose vertical padding is equal, and adjusts to the size of the containing div.
Vertical Spacing

Inside of 1 container, we want 3 divs whose horizontal padding is equal and adjusts to the size of the containing div, and the same 1 level deeper
Horizontal Spacing

Inside of 1 container we want 3 divs in a single row, with equal horizontal padding, that stack into 1 column once they overflow
Overflowing divs

It's a world where we can just add a CSS class and reverse everything in the layout.
1,2,3 -> 3,2,1

1 3

2 2

3 1

.row.reverse {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

IT defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.
Flexbox- Grow

It specifies the "flex shrink factor", which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.
Flexbox-Shrink

It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero.
Flexbox-Shrink