CSS Layout — Positioning and Flexbox

Block and inline elements

Before arranging elements, note that they naturally behave in one of two ways. A block-level element (like <div>, <p>, <h1>) starts on a new line and stretches across the full width available. An inline element (like <a>, <span>, <img>) sits within a line of text and takes only as much width as its content needs. The CSS display property can change this behaviour.

The position property

The position property controls how an element is placed relative to the normal flow of the page. Its main values are:

• static — the default. The element sits in its normal place in the document flow; the offset properties (top, left, etc.) have no effect.
• relative — the element keeps its place in the flow but can then be nudged from that place using top, left, right, bottom. The space it originally occupied is preserved.
• absolute — the element is removed from the normal flow and positioned precisely with top/left/etc., relative to its nearest positioned ancestor (an ancestor whose position is not static). Other elements behave as if it were not there.
• fixed — like absolute, but positioned relative to the browser window, so it stays put even when the page is scrolled (used for a sticky navigation bar or a "back to top" button).

.badge {
  position: absolute;
  top: 10px;
  right: 10px;   /* pinned to the top-right corner of a positioned parent */
}
.menu-bar {
  position: fixed;
  top: 0;        /* stays at the top of the window while scrolling */
  width: 100%;
}

Flexbox — the modern layout tool

Arranging boxes side by side used to be awkward. Flexbox (the Flexible Box Layout) solves this. You turn any container into a flex container by giving it display: flex;. Its direct children then become flex items that can be laid out in a row or column and spaced automatically.

.container {
  display: flex;
  justify-content: space-between;  /* spacing ALONG the main axis */
  align-items: center;            /* alignment ACROSS the other axis */
}

<div class="container">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

The most useful flex-container properties are: