Layout

All HTML elements have a default way in which they display. How an element displays affects how it is laid out on the page or whether it appears at all.

You can control this using the display property, which has the possible values of: inline, inline-block, block, flex, or none.

inline is the default for most elements, displaying them within the flow of the text line. Because they are in the flow of text, most text formatting elements are inline (such as STRONG and EM). SPAN is a structural element which is also inline by default.
inline-block elements are similar to inline, except they can have a defined height and width, while inline elements cannot.
block elements break lines and appear in their own vertical space. Examples of block elements are DIV, P and H1.
none removes the element entirely, and other elements are laid out as if it doesn't exist.
flex causes the element itself to behave like a block, and arranges its child elements as a flexbox

There's a fine tutorial on learning layout if you want to take it step-by-step.

Flexbox

The flexbox model is very useful for adaptive, responsive layouts. Read detailed guides from CSS Reference, CSS Tricks or Codrops.

Container

To use flexbox, you have to set your containing element's display property:

<style>
.container {
  display: flex;
}
.container > div {
  background-color: silver;
  padding: 2rem;
  margin: 1rem;
}
</style>
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Note that the child elements flow on from one-another even though normally a DIV would appear on its own line.

You can change the direction of elements with flow-direction (either row, row-reverse, column, or column-reverse)

<style>
.container2 {
  display: flex;
  flex-direction: column-reverse;
}
.container2 div {
  background-color: silver;
  height: 5rem;
  width: 5rem;
  text-align: center;
  margin: 0.4rem;
}
</style>
<div class="container2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Very useful is enabling wrapping with flex-wrap. nowrap is the default value, but it can be set to wrap or wrap-reverse. Try resizing your browser window to see the wrapping:

<style>
.container3 {
  display: flex;
  flex-wrap: wrap
}
.container3 div {
  background-color: silver;
  height: 5rem;
  width: 5rem;
  text-align: center;
  margin: 0.4rem;
}
</style>
<div class="container3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

You can change how elements are aligned within the container: align-items and justify-content

Items

Items within a flexbox can be made to automatically grow and shrink to accommodate the size of the containing flexbox using the flex property. Items can also be sized relative to each other, for example setting that one item should be twice as big:

<style>
.container4 {
  display: flex;
  flex-wrap: wrap
}
.container4 div {
  background-color: silver;
  height: 5rem;
  width: 5rem;
  text-align: center;
  margin: 0.4rem;
}
.smallItem {
  flex: 1;
}
.bigItem {
  flex: 2;
}
</style>
<div class="container4">
  <div class="bigItem">1</div>
  <div class="smallItem">2</div>
  <div class="smallItem">3</div>
  <div class="smallItem">4</div>
  <div class="smallItem">5</div>
</div>

Centering

Centering content using flexboxes is very easy. You need to wrap the item to centre in a containing element and apply flexbox properties to it.

For example, if we have the HTML:

<div class="container">
  <div>To be centred</div>
</div>

You could use the CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

If you just want to center vertically, you don't need align-items.

Centering in CSS Complete Guide

Floating

Elements can be floated to the left or right, similar to how text wraps around an image in a word processor. Be careful you don't over-use floats as they can to make layouts complicated. Conceptually, floats are like an image you insert into an essay with a word processor. You want it to appear and have text flow around it. Don't build a whole layout based on floating elements.

.box {
  float: left;
}

If you are using floated elements, at some point you might want elements to be able to move past the floated ones, and not appear underneath them. The clear property is useful:

footer {
  clear: both;
}

There are a few tricks to floating elements, so please read up on them.

If you notice that your parent element is no longer 'big enough' to contain your floated elements, please see the end of page on sizing

float (CSS Tricks)

Grids

Grid layout is a new layout technique available in most browsers. Overviews are available from CSS Tricks and Mozilla. It's pretty complicated though, so try to get a grip on the other layout options first.