Layout and responsive CSS

Elements normally participate in document flow. display: block starts on a new line, inline participates in text flow, inline-block combines useful parts of both, and none removes an element from layout.

Flexbox

Flexbox is useful for arranging items along one main axis:

.navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

flex-direction chooses the main axis; justify-content works along it and align-items works across it. CSS Grid is another important layout tool for two-dimensional page layouts and is a good next topic.

Responsive layout

Use the viewport metadata from the HTML lesson and prefer flexible sizes:

.page {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

@media (max-width: 40rem) {
  .navigation {
    align-items: flex-start;
    flex-direction: column;
  }
}

Apply the stylesheet above to your own page and inspect the layout at different viewport widths.

Usability

Provide a visible keyboard focus state and sufficient contrast:

button:focus-visible,
a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

Exercise

Use DevTools to inspect computed styles, matched rules, the box model, and the responsive viewport. Change one property at a time and identify which rule controls the result.