Example Layouts

Vertically and Horizontally Centered

• Responsively position a div in the perfect center of the page 
• Absolutely Centered

Horizontal Spacing

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

Vertical 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

Nested Flexbox 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

Overflowing Divs

• 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

Reverse Divs With CSS

• 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;
}

Flex Items

Flex Grow

• 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

Flex Shrink

• 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

Flex Basis

• 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