Block and Inline

• Block-level elements automatically start on a new line
• Examples: headings, paragraphs, and divs.

• Inline items sit within surrounding content.
• Examples: images and spans.
• Inline doesn't let you set width and height. You must put text inside a div or use a span.

• Inline-block elements align on the same line but not wrapped.
• Within inline-block elements, you can set width and height of the div.

position: relative

• With relative positioning, you can specify how an element should move relative to its current position in the normal page flow.
• Use CSS offset properties top, right, bottom or left.

position: absolute

• Absolute position locks an element in place relative to its parent container.
• Unlike relative, absolute removes an element from the normal flow. Other elements ignore it.
• Use CSS offset properties top, right, bottom or left.
• The element will be locked relative to its closest positioned ancestor.
• The parent item must have a position rule (typically done with position: relative.) Otherwise the browser will default to the body tag.

position: fixed

• Fixed position locks an element from scrolling. It locks relative to the browser window.
• Use CSS offset properties top, right, bottom or left.
• Fixed removes the element from the normal document flow.

When positioning elements in one dimension.

Make a Row or Column

Use the flex-direction attribute with properties row, column, row-reverse or column-reverse.

Example:

Align Elements on the Main Axis

Align Elements on the Cross Axis

Split Flexbox Wrap

By default, a flexbox fits all flex items together on one row or column.
With flex-wrap, you can break the default item wrapping.

Shrink Items to Fit Flexbox

Grow Items as Parent Expands

Set Initial Size Before Shrink and Grow

Shorthand Flex Grow, Shrink and Basis

Rearrange Items in a Flexbox

Override Item Alignment Individually

• Flex items don't allow CSS properties float, clear or vertical-align.
• Align-self takes the same values as align-items.
• Align-self overrides the align-items property.

CSS Grid turns an HTML element into a grid container. You can place child elements into the rows and columns.

Make a Grid with Columns

Make a Grid with Rows and Columns

Change Size of Columns with Units

Make Gaps Between Columns or Rows

Make All Gaps at Once

Set the Columns an Item Consumes with Lines

Set the Rows an Item Consumes with Lines

Justify a Cell's Item Horizontally

Justify a Cell's Item Vertically

Justify All Items Horizontally Simultaneously

Justify All Items Vertically Simultaneously

Divide Grid into Area Template

Place Items into Grid Area

Make an Area without an Area Template

Make Multiple Rows or Columns Simultaneously

Shorthand for Min and Max Cell Size

Make a Flexible Layout with Repeat's Auto-Fill

Resize Cells with Repeat's Auto-Fit

Media Queries for Responsive Design

Make a Grid within a Grid