Flexbox

.nav {
  display: flex;
}

Goes on: the container.

The on-switch. The element becomes a flex container, and every direct child becomes a flex item: side by side, each as wide as its content, all as tall as the tallest one.

What it replaced: float: left on every child, then a clearfix on the parent.

.stack {
  display: flex;
  flex-direction: column;
}

Goes on: the container.

The main axis turns to run top to bottom. Every other property keeps working and now points the new way, which is why a column that will not centre usually wants align-items, not justify-content.

.nav {
  display: flex;
  justify-content: space-between;
}

Goes on: the container.

Decides where the leftover space on the main axis goes: before the items, after them, or between them. It does nothing when there is no leftover space, so a row of items that already fills its container will not move.

.nav {
  display: flex;
  align-items: center;
}

Goes on: the container.

The cross axis. The default is stretch, which is why flex children are equal height without being asked. center puts a small logo and a tall button on one shared middle line.

What it replaced: vertical-align: middle, which only ever worked on inline and table-cell boxes.

.nav {
  display: flex;
  gap: 12px;
}

Goes on: the container.

One declaration on the container. No space at the outer edges, nothing to undo on the first or last child, and wrapped lines are spaced too.

What it replaced: a margin on every item and a :last-child rule to remove one of them.

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

Goes on: the container.

Without it a flex container keeps everything on one line and squeezes the items. With it, items that do not fit move to a new line. Each line is laid out separately, so columns do not align between lines. If you need them to, that is a grid.

.sidebar { flex: 0 0 200px; }
.content { flex: 1; }

Goes on: the item.

flex is three values: grow, shrink, basis. The sidebar will not grow, will not shrink, and starts at 200px. The content has flex: 1, so it takes whatever remains. Two items with flex: 1 split the remainder evenly.

What it replaced: a float and a margin-left equal to the sidebar width, recalculated by hand on every change.

.sign-in {
  margin-inline-start: auto;
}

Goes on: the item.

An auto margin in a flex container absorbs all the free space on that side. One line on one item, and it stays correct when a fourth link is added. space-between cannot do this with three groups.

What it replaced: an empty spacer div with flex: 1.

.media-body {        /* the flex item */
  min-width: 0;
}
.media-body .title {  /* the text inside it */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Goes on: the item.

The most common flexbox bug. A flex item will not shrink below the width of its content, because its min-width starts as auto. So the ellipsis you put on the title never triggers: the flex item around it refuses to get narrower, and the button leaves the card. min-width: 0 on the flex item gives it permission to shrink. (overflow: hidden on the item has the same effect, as a side effect.)

.badge {
  align-self: flex-start;
}

Goes on: the item.

align-items sets the cross-axis alignment for every item. align-self overrides it for one. There is no justify-self in flexbox: on the main axis, use an auto margin.

.promo {
  order: -1;
}

Goes on: the item.

Items paint in order of their order value, lowest first, and the default is 0.

Careful. This moves the pixels and nothing else. Keyboard focus and screen readers still follow the HTML. If the Tab key now jumps around the screen, the fix is to reorder the HTML, not the CSS.